Bootstrap Snippet double slider using HTML CSS Bootstrap 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
35
36
37
<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 ---------->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" />
<div class="catering-newstyle catering-slider-thumb">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-4">
                    <div class="oveerlay-slider">
                        <div class="section-title">
                            <h2>We Do All Types of Events</h2>
                            <p>At Shah’s Halal Food we can provide our mobile food carts and trucks for events of all types. If you’re looking to hire a vendor for catering at your next event then look no further.</p>
                        </div>
                        <div class="vertical-slider">
                            <div class="slider-galeria-thumbs">
                                <div>
                                    <div class="cate-thumb">
                                        <img src="https://www.shahshalalfood.com/wp-content/uploads/2022/11/cate-ico-1.png" alt="" />
                                        <span>School Events</span>
                                    </div>
                                </div>
                                <div>
                                    <div class="cate-thumb">
                                        <img src="https://www.shahshalalfood.com/wp-content/uploads/2022/11/cate-ico-2.png" alt="" />
                                        <span>Weddings</span>
                                    </div>
                                </div>
                                <div>
                                    <div class="cate-thumb">
                                        <img src="https://www.shahshalalfood.com/wp-content/uploads/2022/11/cate-ico-3.png" alt="" />
                                        <span>Eid Parties</span>
                                    </div>
                                </div>
                                <div>
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
.cate-thumb{
   position: relative;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   padding: 6px 15px;
   border-radius: 3px;
   overflow: hidden;
   background: #ee1d24;
}
.cate-thumb *{
   position: relative;
   z-index: 9;
}
.cate-thumb::after{
   transition: .3s all ease-in-out;
   -webkit-transition: .3s all ease-in-out;
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 100%;
   content: "";
   transform: translateX(-100%);
   left: 0;
   /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffc60d+0,f04722+100 */
background: rgb(255,198,13); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(255,198,13,1) 0%, rgba(240,71,34,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(255,198,13,1) 0%,rgba(240,71,34,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(255,198,13,1) 0%,rgba(240,71,34,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc60d', endColorstr='#f04722',GradientType=1 ); /* IE6-9 */
}
.catering-slider-thumb  .slick-current .cate-thumb::after{
   transform: translateX(0);
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
$('.slider-galeria').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  autoplay: true,
  useTransform: false,
  asNavFor: '.slider-galeria-thumbs',
});
$('.slider-galeria-thumbs').slick({
  slidesToShow: 5,
  slidesToScroll: 1,
  autoplay: true,
  asNavFor: '.slider-galeria',
  arrows: false,
  vertical: true,
  focusOnSelect: true,
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"double slider"
Bootstrap 4.1.1 Snippet by Shivamsemisetia

Related: See More

Questions / Comments:

"double slider" Bootstrap 4.1.1 Snippet by Shivamsemisetia

Related: See More

Questions / Comments:

"double slider"
Bootstrap 4.1.1 Snippet by Shivamsemisetia