Horizontal product card div slider not working

Question

I created this product card slider but it's prev and nex buttons are not working. Also I tried some other ways but it affect my product card structure. So please, If there is any easy way to do this which does not affect my card structure it will be helpfull.

.container{
    padding:80px 7%;
    position: relative;
    font-family: 'Open Sans', sans-serif;
  }
  
  .details{
    display: flex;
    justify-content: space-between;
    margin: 20px 0px 30px 0px;
    color: white;
  }

  .right{
    max-width: 50%;
  }
  
  .container .box-container .box{
    box-shadow: 0 5px 10px rgba(0,0,0,.3);
    background:#0d1b2a;
    padding:15px;
    margin: 40px 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap:15px;
  }
  
  .container .box-container .box .image-container{
    flex:1 1 500px;
    display: flex;
    align-items: center;
    gap:15px;
  }
  
  .container .box-container .box .content{
    flex:1 1 350px;
  }
  
  .container .box-container .box .image-container .small-image{
    width:20%;
  }
  
  .container .box-container .box .image-container .big-image{
    width:80%;
  }
  
  .container .box-container .box .image-container .small-image img{
    width:100%;
    padding:10px;
    border:1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
  }
  
  .container .box-container .box .image-container .small-image img:hover{
    background:rgba(167, 167, 167, 0.2);
  }
  
  .container .box-container .box .image-container .big-image img{
    width:95%;
    padding:20px;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,.2));
  }
  
  .container .box-container .box .content h3{
    color:rgb(255, 255, 255);
    font-size: 25px;
  }
  
  .hide-1{
    background-color: transparent;
    padding: 5px 10px;
    border: 1px solid rgb(255, 255, 255);
    color: rgb(255, 255, 255);
  }
.product{
    height: 100vh;
}
  @media only screen and (max-width: 370px) {
    .details{
      flex-direction: column  ;
    }

    .hide-1{
        font-size: .8em;
    }
  }

  /* --------------------------------------- */
  html,
  body {
    height: 100%;
    margin: 0px;
  }
  

  .slider {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;

  }
  
  .slides {
    display: flex;
    overflow-x: scroll;
    position: relative;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
  }
  
  .slide:nth-of-type(even) {
    background-color: rgb(250, 246, 212);
  }
  
  .slide {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 100%;
    height: 400px;
    scroll-snap-align: center;
    margin-right: 0px;
    box-sizing: border-box;
    background: white;
    transform-origin: center center;
    transform: scale(1);
  }
  
  .slide__text {
    font-size: 40px;
    font-weight: bold;
    font-family: sans-serif;
  }
  
  .slide a {
    background: none;
    border: none;
  }
  
  a.slide__prev,
  .slider::before {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    left: 2%;
  }
  
  a.slide__next,
  .slider::after {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    right: 2%;
  }
  
  .slider::before,
  .slider::after,
  .slide__prev,
  .slide__next {
    position: absolute;
    top: 48%;
    width: 35px;
    height: 35px;
    border: solid black;
    border-width: 0 4px 4px 0;
    padding: 3px;
    box-sizing: border-box;
  }
  
  .slider::before,
  .slider::after {
    content: "";
    z-index: 1;
    background: none;
    pointer-events: none;
  }
  
  .slider__nav {
    box-sizing: border-box;
    position: absolute;
    bottom: 5%;
    left: 50%;
    width: 200px;
    margin-left: -100px;
    text-align: center;
  }
  
  .slider__navlink {
    display: inline-block;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background-color: black;
    margin: 0 10px 0 10px;
  }
  
  
  
  
  
  
  
  
  .read-article{
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 999;
    color: #000;
    background: white;
    padding: 10px 20px;
    border-radius: 10px;
    font-family: arial;
    text-decoration: none;
    box-shadow: rgb(50 50 93 / 25%) 0 0 100px -20px, rgb(0 0 0 / 30%) 0 0 60px -15px;
  }
  .read-article:hover{
      background: #d5d5d5;
      box-shadow: rgb(50 50 93 / 25%) 0 0 100px -20px, rgb(0 0 0 / 30%) 0 0 60px 0px;
  }
  iframe[sandbox] .read-article{
    display: none;
  }


   
            
        
            
                
                    
                    
                    
                    
                
                
                    
                
            
            
                Phillips
                
                
                    ID: Mp2223-0
                    Modality: CT
                    Model: Ingenuity
                    YOM: 2016
                
                
                    Slice: 128
                    Origin: UAE
                    Remark: System In Good  Working Condition
                
                
                To Know more Call @8766474892
            
            
            
        
        
            
                
                    
                    
                    
                    
                
                
                    
                
            
            
                Phillips
                
                
                    ID: Mp2223-0
                    Modality: CT
                    Model: Ingenuity
                    YOM: 2016
                
                
                    Slice: 128
                    Origin: UAE
                    Remark: System In Good  Working Condition
                
                
                To Know more Call @8766474892
            
            
            
        
        
            
                
                    
                    
                    
                    
                
                
                    
                
            
            
                Phillips
                
                
                    ID: Mp2223-0
                    Modality: CT
                    Model: Ingenuity
                    YOM: 2016
                
                
                    Slice: 128
                    Origin: UAE
                    Remark: System In Good  Working Condition
                
                
                To Know more Call @8766474892
            
            
            
        
        
            
                
                    
                    
                    
                    
                
                
                    
                
            
            
                Phillips
                
                
                    ID: Mp2223-0
                    Modality: CT
                    Model: Ingenuity
                    YOM: 2016
                
                
                    Slice: 128
                    Origin: UAE
                    Remark: System In Good  Working Condition
                
                
                To Know more Call @8766474892

Also I want to optimize my code so if it is possible let me know. Thanks in advance.

user_14225299 · Answer

You can use scrollIntoView() and based on the index of the slide which is currently in view ,the next and previous button will respond correctly.

Check the snippet below

var next=document.getElementsByClassName('slide__next')[0];
    var prev=document.getElementsByClassName('slide__prev')[0];
    var length= document.getElementsByClassName('slide').length;        
    var width_slide=document.getElementsByClassName('slides')[0].clientWidth;
    var i=0,j=1;
    
    var active=document.getElementsByClassName('active')[0];
    
    var slide=Array.from(document.getElementsByClassName('slide'));
    
    document.getElementsByClassName('slide')[0].classList.add('active');
    
    next.addEventListener('click',function(){
        let index=Array.from(document.getElementsByClassName('slide')).indexOf(document.getElementsByClassName('active')[0]);
        if(index<(length-1))
        {
        document.getElementsByClassName('slide')[index].classList.remove('active');
        document.getElementsByClassName('slide')[index+1].classList.add('active');
        }
        document.getElementsByClassName('active')[0].scrollIntoView();
        })

        prev.addEventListener('click',function(){
        let index=Array.from(document.getElementsByClassName('slide')).indexOf(document.getElementsByClassName('active')[0]);
        
        if(index>0)
        {
        document.getElementsByClassName('slide')[index].classList.remove('active');
        document.getElementsByClassName('slide')[index-1].classList.add('active');
        }
        document.getElementsByClassName('active')[0].scrollIntoView();
    })

        .container{
    padding:80px 7%;
    position: relative;
    font-family: 'Open Sans', sans-serif;
  }
  
  .details{
    display: flex;
    justify-content: space-between;
    margin: 20px 0px 30px 0px;
    color: white;
  }

  .right{
    max-width: 50%;
  }
  
  .container .box-container .box{
    box-shadow: 0 5px 10px rgba(0,0,0,.3);
    background:#0d1b2a;
    padding:15px;
    margin: 40px 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap:15px;
  }
  
  .container .box-container .box .image-container{
    flex:1 1 500px;
    display: flex;
    align-items: center;
    gap:15px;
  }
  
  .container .box-container .box .content{
    flex:1 1 350px;
  }
  
  .container .box-container .box .image-container .small-image{
    width:20%;
  }
  
  .container .box-container .box .image-container .big-image{
    width:80%;
  }
  
  .container .box-container .box .image-container .small-image img{
    width:100%;
    padding:10px;
    border:1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
  }
  
  .container .box-container .box .image-container .small-image img:hover{
    background:rgba(167, 167, 167, 0.2);
  }
  
  .container .box-container .box .image-container .big-image img{
    width:95%;
    padding:20px;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,.2));
  }
  
  .container .box-container .box .content h3{
    color:rgb(255, 255, 255);
    font-size: 25px;
  }
  
  .hide-1{
    background-color: transparent;
    padding: 5px 10px;
    border: 1px solid rgb(255, 255, 255);
    color: rgb(255, 255, 255);
  }
.product{
    height: 100vh;
}
  @media only screen and (max-width: 370px) {
    .details{
      flex-direction: column  ;
    }

    .hide-1{
        font-size: .8em;
    }
  }

  /* --------------------------------------- */
  html,
  body {
    height: 100%;
    margin: 0px;
  }
  

  .slider {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;

  }
  
  .slides {
    display: flex;
    overflow-x: scroll;
    position: relative;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
  }
  
  .slide:nth-of-type(even) {
    background-color: rgb(250, 246, 212);
  }
  
  .slide {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 100%;
    height: 400px;
    scroll-snap-align: center;
    margin-right: 0px;
    box-sizing: border-box;
    background: white;
    transform-origin: center center;
    transform: scale(1);
  }
  
  .slide__text {
    font-size: 40px;
    font-weight: bold;
    font-family: sans-serif;
  }
  
  .slide a {
    background: none;
    border: none;
  }
  
  a.slide__prev,
  .slider::before {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    left: 2%;
  }
  
  a.slide__next,
  .slider::after {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    right: 2%;
  }
  
  .slider::before,
  .slider::after,
  .slide__prev,
  .slide__next {
    position: absolute;
    top: 48%;
    width: 35px;
    height: 35px;
    border: solid black;
    border-width: 0 4px 4px 0;
    padding: 3px;
    box-sizing: border-box;
  }
  
  .slider::before,
  .slider::after {
    content: "";
    z-index: 1;
    background: none;
    pointer-events: none;
  }
  
  .slider__nav {
    box-sizing: border-box;
    position: absolute;
    bottom: 5%;
    left: 50%;
    width: 200px;
    margin-left: -100px;
    text-align: center;
  }
  
  .slider__navlink {
    display: inline-block;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background-color: black;
    margin: 0 10px 0 10px;
  }
  
  
  
  
  
  
  
  
  .read-article{
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 999;
    color: #000;
    background: white;
    padding: 10px 20px;
    border-radius: 10px;
    font-family: arial;
    text-decoration: none;
    box-shadow: rgb(50 50 93 / 25%) 0 0 100px -20px, rgb(0 0 0 / 30%) 0 0 60px -15px;
  }
  .read-article:hover{
      background: #d5d5d5;
      box-shadow: rgb(50 50 93 / 25%) 0 0 100px -20px, rgb(0 0 0 / 30%) 0 0 60px 0px;
  }
  iframe[sandbox] .read-article{
    display: none;
  }


   
                
                
            

        
            
                
                    
                    
                    
                    
                
                
                    
                
            
            
                Phillips
                
                
                    ID: Mp2223-0
                    Modality: CT
                    Model: Ingenuity
                    YOM: 2016
                
                
                    Slice: 128
                    Origin: UAE
                    Remark: System In Good  Working Condition
                
                
                To Know more Call @8766474892
            
        
        
            
                
                    
                    
                    
                    
                
                
                    
                
            
            
                Phillips
                
                
                    ID: Mp2223-0
                    Modality: CT
                    Model: Ingenuity
                    YOM: 2016
                
                
                    Slice: 128
                    Origin: UAE
                    Remark: System In Good  Working Condition
                
                
                To Know more Call @8766474892
            
        
        
            
                
                    
                    
                    
                    
                
                
                    
                
            
            
                Phillips
                
                
                    ID: Mp2223-0
                    Modality: CT
                    Model: Ingenuity
                    YOM: 2016
                
                
                    Slice: 128
                    Origin: UAE
                    Remark: System In Good  Working Condition
                
                
                To Know more Call @8766474892
            
        
        
            
                
                    
                    
                    
                    
                
                
                    
                
            
            
                Phillips
                
                
                    ID: Mp2223-0
                    Modality: CT
                    Model: Ingenuity
                    YOM: 2016
                
                
                    Slice: 128
                    Origin: UAE
                    Remark: System In Good  Working Condition
                
                
                To Know more Call @8766474892

user_8023811 · Answer

The main problem is that the slides div have an overflow-x:scroll , which keeps the previous/next links inside the container while your arrow icons are on the outside, so when you click on them you don't click on the link at all.

Also it is not a good practice to have many previous/next links, you only need one.

This is what I updated

Added simple dynamic js function to handle prev/next clicks
Update a.slider prev/next styles including before/after
Previous/next links moved to to the box-container

Note: I didn't hide the next arrow icon when it is the last slide or hide the prev arrow icon when it is the first slide, but you can add it easily.

 function nextPrev(type) {
      const slides = document.querySelector(".slides");
      const slideWidth = document.querySelector(".slide").offsetWidth;
      const scrolLeft =
        slides.scrollLeft + (type === "next" ? slideWidth : -slideWidth);
      slides.scrollTo({
        left: scrolLeft,
        behavior: "smooth",
      });
    }

.container {
        padding: 80px 7%;
        position: relative;
        font-family: "Open Sans", sans-serif;
      }

      .details {
        display: flex;
        justify-content: space-between;
        margin: 20px 0px 30px 0px;
        color: white;
      }

      .right {
        max-width: 50%;
      }

      .container .box-container .box {
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
        background: #0d1b2a;
        padding: 15px;
        margin: 40px 0;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 15px;
      }

      .container .box-container .box .image-container {
        flex: 1 1 500px;
        display: flex;
        align-items: center;
        gap: 15px;
      }

      .container .box-container .box .content {
        flex: 1 1 350px;
      }

      .container .box-container .box .image-container .small-image {
        width: 20%;
      }

      .container .box-container .box .image-container .big-image {
        width: 80%;
      }

      .container .box-container .box .image-container .small-image img {
        width: 100%;
        padding: 10px;
        border: 1px solid rgba(255, 255, 255, 0.3);
        cursor: pointer;
      }

      .container .box-container .box .image-container .small-image img:hover {
        background: rgba(167, 167, 167, 0.2);
      }

      .container .box-container .box .image-container .big-image img {
        width: 95%;
        padding: 20px;
        filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.2));
      }

      .container .box-container .box .content h3 {
        color: rgb(255, 255, 255);
        font-size: 25px;
      }

      .hide-1 {
        background-color: transparent;
        padding: 5px 10px;
        border: 1px solid rgb(255, 255, 255);
        color: rgb(255, 255, 255);
      }
      .product {
        height: 100vh;
      }
      @media only screen and (max-width: 370px) {
        .details {
          flex-direction: column;
        }

        .hide-1 {
          font-size: 0.8em;
        }
      }

      /* --------------------------------------- */
      html,
      body {
        height: 100%;
        margin: 0px;
      }

      .slider {
        width: 100%;
        border-radius: 20px;
        overflow: hidden;
      }

      .slides {
        display: flex;
        overflow-x: scroll;
        position: relative;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
      }

      .slide:nth-of-type(even) {
        background-color: rgb(250, 246, 212);
      }

      .slide {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        width: 100%;
        height: 400px;
        scroll-snap-align: center;
        margin-right: 0px;
        box-sizing: border-box;
        background: white;
        transform-origin: center center;
        transform: scale(1);
      }

      .slide__text {
        font-size: 40px;
        font-weight: bold;
        font-family: sans-serif;
      }

      .slide a {
        background: none;
        border: none;
      }

      a.slide__prev,
      a.slide__next {
        position: absolute;
        border: solid black;

        border-width: 0 4px 4px 0;
        top: 48%;
        width: 35px;
        height: 35px;
      }

      a.slide__prev {
        transform: rotate(135deg);
        -webkit-transform: rotate(135deg);
        left: 2%;
      }

      a.slide__next {
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        right: 2%;
      }

      .slider::before,
      .slider::after {
        content: "";
        z-index: 1;
        background: none;
        pointer-events: none;
      }

      .slider__nav {
        box-sizing: border-box;
        position: absolute;
        bottom: 5%;
        left: 50%;
        width: 200px;
        margin-left: -100px;
        text-align: center;
      }

      .slider__navlink {
        display: inline-block;
        height: 15px;
        width: 15px;
        border-radius: 50%;
        background-color: black;
        margin: 0 10px 0 10px;
      }

      .read-article {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 999;
        color: #000;
        background: white;
        padding: 10px 20px;
        border-radius: 10px;
        font-family: arial;
        text-decoration: none;
        box-shadow: rgb(50 50 93 / 25%) 0 0 100px -20px,
          rgb(0 0 0 / 30%) 0 0 60px -15px;
      }
      .read-article:hover {
        background: #d5d5d5;
        box-shadow: rgb(50 50 93 / 25%) 0 0 100px -20px,
          rgb(0 0 0 / 30%) 0 0 60px 0px;
      }
      iframe[sandbox] .read-article {
        display: none;
      }

    
      
        
          
            
              
                
                
                
                
              
              
                
              
            
            
              Phillips
              
                
                  ID: Mp2223-0
                  Modality: CT
                  Model: Ingenuity
                  YOM: 2016
                
                
                  Slice: 128
                  Origin: UAE
                  Remark: System In Good Working Condition
                
              
              To Know more Call @8766474892
            
          
          
            
              
                
                
                
                
              
              
                
              
            
            
              Phillips
              
                
                  ID: Mp2223-0
                  Modality: CT
                  Model: Ingenuity
                  YOM: 2016
                
                
                  Slice: 128
                  Origin: UAE
                  Remark: System In Good Working Condition
                
              
              To Know more Call @8766474892
            
          
          
            
              
                
                
                
                
              
              
                
              
            
            
              Phillips
              
                
                  ID: Mp2223-0
                  Modality: CT
                  Model: Ingenuity
                  YOM: 2016
                
                
                  Slice: 128
                  Origin: UAE
                  Remark: System In Good Working Condition
                
              
              To Know more Call @8766474892
            
          
          
            
              
                
                
                
                
              
              
                
              
            
            
              Phillips
              
                
                  ID: Mp2223-0
                  Modality: CT
                  Model: Ingenuity
                  YOM: 2016
                
                
                  Slice: 128
                  Origin: UAE
                  Remark: System In Good Working Condition
                
              
              To Know more Call @8766474892

Horizontal product card div slider not working

2 Answers

Check the snippet below