Bootstrap Snippet custom widget slider using HTML CSS Bootstrap jQuery

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 href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
    <div class="row">
        <h2> custom widget  slider </h2>
    </div>
</div>
<div class="col-md-6">
     <div class="box text-center">
        <div class="row">
            <div class="col-md-2">
                <a class="pointer sliderarrow " id="left"> 
                    <i class="fa -chevron-left"></i>
                </a>
            </div>
            <div class="col-md-8">
                <img src="http://spinksimpex.com/test/sample/1.jpg" id="imageDisplay" alt="-1"  width="400px">
            </div>
            <div class="col-md-2">
                <a class="pointer sliderarrow" id="right">
                     <i class="fa -chevron-right"></i>
                </a>
            </div>
        </div>
        <div class="col-md-8 offset-md-2">
            <ul class="smal_sample">
                <li><img src="https://image.freepik.com/free-photo/cityscape-with-seagulls-black-white-photo-with-film-grain-effect_1401-369.jpg" class="gallery"></li>
                <li><img src="https://image.freepik.com/free-photo/milford-sound-new-zealand-travel-destination-concept_53876-42945.jpg" class="gallery"></li>
                <li><img src="https://image.freepik.com/free-photo/old-wooden-door-with-bougainvillea_1401-306.jpg" class="gallery"></li>
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
.box {
    width: 100%;
    height: 550px;
    border: 4px double #cccccc29;
}
ul{
    list-style:none;
}
ul.smal_sample li {
    width: 24.1%;
    float: left;
    margin: 0 0.4%;
    border: 1px solid #ccc;
}
ul.smal_sample li img
{
    width: 100%;
}
.sliderarrow {
    position: absolute;
    top: 200px;
    background: red;
    width: 40px;
    height: 40px;
    font-size: 25px;
    left: 34px;
    color: #fff !important;
    padding: 2px;
    border-radius: 50px;
}
 
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
$(function(){
 
    var  smalslider =  (function(na=""){
         var left = $('#left');
         var right = $('#right');
         var img = $('#imageDisplay');
         var  n;
         if (na=="") {
            n = img.attr('alt');    
         }else{
            n = na;
         }
         
         if (n < -2) {
            n ="-1";
         }
         if (n >= 3) {
            n =n-4;
         }
         
         n++;
         left.attr('alt',n);
         right.attr('alt',n);
         img.attr('alt',n);
         $(".smal_sample li").removeClass('active');
         $(".smal_sample li:eq("+n+")").addClass('active');
         img.hide();
         var s_img = $(".gallery:eq("+n+")").attr('src');
         img.attr('src',s_img);
         img.show();
    });
    setInterval(function(){smalslider(); }, 2000);
    
    $(document.body).on('click', '#left', function(event) {
        event.preventDefault();
        var num = parseInt($(this).attr('alt'));
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"custom widget slider "
Bootstrap 4.1.1 Snippet by saddamSaifi1992

Related: See More

Questions / Comments:

"custom widget slider " Bootstrap 4.1.1 Snippet by saddamSaifi1992

Related: See More

Questions / Comments:

"custom widget slider "
Bootstrap 4.1.1 Snippet by saddamSaifi1992