Share via

automatically scroll cards sideways

Donald Symmons 2,856 Reputation points
2023-07-19T08:17:17.77+00:00

I have 5 cards that I can swipe through using the cursor, using swipe.js, css and html. Is there any way the cards can swipe automatically without using the cursor to swipe?

For example I want that when that section of the page is seen, the cards will swipe itself automatically.

<style>
section{position: relative; width: 100%; min-height: 100vh; display: flex; justify-content: center; align-items: center; background: #2196f3; overflow: hidden;}
        .swiper-container {width: 100%; padding-top: 50px; padding-bottom: 50px; margin: 0 auto;}
        .swiper-slide {margin: 0 auto; background-position: center; background-size: cover; width: 320px; background: #fff; box-shadow: 0 15px 50px rgba(0,0,0,0.2)}
        .testimonialBox{
            position: relative;
            width:100%;
            padding: 40px;
            padding-top: 90px;
            color: #999;
        }
        .details{
            font-size: 2rem;
        }
</style>

<div class="subbottom">
               <section>
                   <div class="swiper-container">
                       <div class="swiper-wrapper">
                           <div class="swiper-slide">
                               <div class="testimonialBox">
                                   <div class="showcontent">
                                       <label class="details">1</label>
                                   </div>
                               </div>
                           </div>
                           <div class="swiper-slide">
                               <div class="testimonialBox">
                                   <div class="showcontent">
                                       <label class="details">2</label>
                                   </div>
                               </div>
                           </div>
                           <div class="swiper-slide">
                               <div class="testimonialBox">
                                   <div class="showcontent">
                                       <label class="details">3</label>
                                   </div>
                               </div>
                           </div>
                           <div class="swiper-slide">
                               <div class="testimonialBox">
                                   <div class="showcontent">
                                       <label class="details">4</label>
                                   </div>
                               </div>
                           </div>
                           <div class="swiper-slide">
                               <div class="testimonialBox">
                                   <div class="showcontent">
                                       <label class="details">5</label>
                                   </div>
                               </div>
                           </div>
                       </div>
                   </div>
               </section>
                <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
            </div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/bootstrap.min.js"></script>
        <script type="text/javascript">
            var swiper = new Swiper('.swiper-container', {
                effect: 'coverflow',
                grabCursor: true,
                centeredSlides: true,
                slidesPerView: 'auto',
                coverflowEffect: {
                    rotate: 0,
                    stretch: 0,
                    depth: 100,
                    modifier: 2,
                    slideShadows: true,
                },
                loop: true,
            });
        </script>
.NET
.NET
Microsoft Technologies based on the .NET software framework.
3,481 questions
ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,330 questions
0 comments
Accepted answer
  1. QiYou-MSFT 4,306 Reputation points Microsoft Vendor
    2023-07-20T07:05:43.9433333+00:00

    Hi @Donald Symmons

    Based on your needs, I think you can achieve this design by setting the distance of the scroll bar from the top of the page.

    Use: let scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;

    The js code you gave me for scroll cards sideways will make the card disappear directly, but I can show you how my design works. My design is when that section of the page is seen, the cards will show yellow.

    To better showcase the features, I increased the distance between the card and the top of the page:

    .swiper-container {width: 100%; padding-top: 50px; padding-bottom: 50px; margin: 0 auto;}

    Changed to

    .swiper-container {width: 100%; padding-top: 3050px; padding-bottom: 50px; margin: 0 auto;}

    Code:

    <style>
section{position: relative; width: 100%; min-height: 100vh; display: flex; justify-content: center; align-items: center; background: #2196f3; overflow: hidden;}
        .swiper-container {width: 100%; padding-top: 3050px; padding-bottom: 50px; margin: 0 auto;}
        .swiper-slide {margin: 0 auto; background-position: center; background-size: cover; width: 320px; background: #fff; box-shadow: 0 15px 50px rgba(0,0,0,0.2)}
        .testimonialBox{
            position: relative;
            width:100%;
            padding: 40px;
            padding-top: 90px;
            color: #999;
        }
        .details{
            font-size: 2rem;
        }
</style>

<div class="subbottom">
               <section>
                   <div class="swiper-container">
                       <div class="swiper-wrapper">
                           <div class="swiper-slide" id="card1">
                               <div class="testimonialBox">
                                   <div class="showcontent">
                                       <label class="details">1</label>
                                   </div>
                               </div>
                           </div>
                           <div class="swiper-slide" id="card2">
                               <div class="testimonialBox">
                                   <div class="showcontent">
                                       <label class="details">2</label>
                                   </div>
                               </div>
                           </div>
                           <div class="swiper-slide" id="card3">
                               <div class="testimonialBox">
                                   <div class="showcontent">
                                       <label class="details">3</label>
                                   </div>
                               </div>
                           </div>
                           <div class="swiper-slide" id="card4">
                               <div class="testimonialBox">
                                   <div class="showcontent">
                                       <label class="details">4</label>
                                   </div>
                               </div>
                           </div>
                           <div class="swiper-slide" id="card5">
                               <div class="testimonialBox">
                                   <div class="showcontent">
                                       <label class="details">5</label>
                                   </div>
                               </div>
                           </div>
                       </div>
                   </div>
               </section>
                <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
    <input type="button" onload="fun()" />
            </div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
        
        var intervalId = setInterval(function () {
           let scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
            if (scrollTop > 2500) {
                document.getElementById("card1").style.backgroundColor = "yellow";
                document.getElementById("card2").style.backgroundColor = "yellow";
                document.getElementById("card3").style.backgroundColor = "yellow";
                document.getElementById("card4").style.backgroundColor = "yellow";
                document.getElementById("card5").style.backgroundColor = "yellow";
            }
            if (scrollTop < 2500) {
                document.getElementById("card1").style.backgroundColor = "white";
                document.getElementById("card2").style.backgroundColor = "white";
                document.getElementById("card3").style.backgroundColor = "white";
                document.getElementById("card4").style.backgroundColor = "white";
                document.getElementById("card5").style.backgroundColor = "white";
            }
        }, 100);
        
                
            

          
            
            
    </script>

    Output:

    Test12

    Best Regards

    Qi You

    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

0 additional answers

Sort by: Most helpful
Most helpful Newest Oldest