automatically scroll cards sideways

Question

automatically scroll cards sideways

Donald Symmons 3,066

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>

Accepted answer

0 additional answers

Your answer

Answer 1

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.

Donald Symmons 3,066 Reputation points

2023-07-20T13:48:48.37+00:00

Hi @QiYou-MSFT ,

Here is how my cards are showing and how they are being scrolled sideways.

In the image, I am using the mouse to drag the cards to swipe sideways, But I want to know if this can be done without using the mouse and cursor to drag the cards sideways. I want it to scroll automatically.
QiYou-MSFT 4,326 Reputation points Microsoft External Staff

2023-07-21T06:46:22.67+00:00

Hi @Donald Symmons

Later I took a closer look at your js code and I found out that you were using Swiper Element. I didn't install this package beforehand, so I can't use its features, which prevents me from reproducing your code.

In fact, you only need to add a property to achieve automatic swipe:

autoplay: true

<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, autoplay: true }); </script>

Best Regards

Qi You

Share via

automatically scroll cards sideways

0 additional answers

Your answer