Bootstrap Snippet marque slide vertical using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<body>
<div class="container">
    <div class="row">
       <ol>
          <li><img src="https://static7.depositphotos.com/1000695/734/i/600/depositphotos_7343574-stock-photo-kitten-on-a-white-background.jpg" alt="" class="pic"></li>
          <li><img src="https://static7.depositphotos.com/1000695/734/i/600/depositphotos_7343574-stock-photo-kitten-on-a-white-background.jpg" alt="" class="pic"></li>
          <li><img src="https://static7.depositphotos.com/1000695/734/i/600/depositphotos_7343574-stock-photo-kitten-on-a-white-background.jpg" alt="" class="pic"></li>
          <li><img src="https://static7.depositphotos.com/1000695/734/i/600/depositphotos_7343574-stock-photo-kitten-on-a-white-background.jpg" alt="" class="pic"></li>
      </ol>
      <div class="buttons">
          <button class="btn prev">Prev</button>
          <button class="next">Next</button>
      </div>
    </div>
</div>
</body>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
ol{
    list-style: none;
    width: 200px;
    height: 200px;
    padding: 0;
    display: flex;
    flex-direction: column;
    border: 2px solid black;
    overflow: hidden;
    position: relative;
}
ol li{
    position: absolute;
    width: 100%;
    height: 100%;
}
.pic{
    height: 100%;
    object-fit: cover;
    transition: all 0.25s ease-in-out;
}
/*The below code will put the images vertically one below the other*/
ol li:nth-child(2){
        transform: translateY(100%);
}
ol li:nth-child(3){
    transform: translateY(200%);
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
const imgSlides = document.querySelectorAll(".pic");
const nextBtn = document.querySelector(".next");
const prevBtn = document.querySelector(".prev");
let counter = 0;
nextBtn.addEventListener('click', function(){
    counter++;
    carouse();
})
prevBtn.addEventListener('click', function(){
    counter--;
    carouse();
})
function carouse(){
    if(counter < imgSlides.length -1){
        nextBtn.disabled = false;
    }
    else{
        nextBtn.disabled = true; //Disabling the next button if the current image is the last image
    }
    if(counter > 0){
        prevBtn.disabled = false;
    }
    else{
        prevBtn.disabled = true;  //Disabling the prev button if the current image is the first image
    }
    //Changing the images vertical positon based on the counter value
    imgSlides.forEach(function(slide){
        slide.style.transform = `translateY(-${counter*100}%)`
    })
}
prevBtn.disabled = true;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"marque slide vertical"
Bootstrap 4.1.1 Snippet by muhittinbudak

Related: See More

Questions / Comments:

"marque slide vertical" Bootstrap 4.1.1 Snippet by muhittinbudak

Related: See More

Questions / Comments:

"marque slide vertical"
Bootstrap 4.1.1 Snippet by muhittinbudak