Bootstrap Snippet Simple side bar flip 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.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>
<!------ Include the above in your HEAD tag ---------->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
    <h1 class="text-center">SIMPLE FLIP SLIDER</h1>
    <div class="row text-center" >
        
    <div class="col-md-6 offset-md-3" style="position:relative;min-height:380px;top:50;margin-top:8vh;padding:2%;" >
        <div class="" style="">
            <div class="arrow-up" id="arrow_up">
                <span class="fa fa-chevron-circle-up fa-3x txt-blue"></span>
            </div>
            <div class="arrow-down" id="arrow_down">
                <span class="fa fa-chevron-circle-down fa-3x txt-blue"></span>
            </div>
            
            <div class="flexible-default flexible-div flexible-div1">
                <div class="row" >
                    <h4 class="text-center flexible-div-header col-md-12"> Our services</h4>
                    <p class="col-md-12"> 
                    Lorem ipsum dolor sit amet, id sit vidit reque facer. Per solet delectus perfecto ei. Illud omnesque interpretaris no duo, ad aeterno fastidii liberavisse sit, case aliquid in sea. Ne atomorum moderatius argumentum vim.
                    </p>
                    <a id="workshop" onmouseover="bigImg('workshop')" onmouseout="bignor('workshop')" 
                        class="btn btn-secondary  btn-sm pull-right" href="#">
                        Read more &nbsp <span class="fa fa-angle-double-right"></span>
                    </a>
                </div>
            </div>  
           
            <div class="flexible-before flexible-div flexible-div2" >
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
    .flexible-div1{background:#d50000;}
    .flexible-div2{background:#78909C}
    .flexible-div3{background:#D81B60}
    .flexible-div4{background:#5C6BC0}
    .flexible-div{
        position:absolute;
        max-height:350px;
        width:100%;
        /*background: #eee;*/         
        padding:10% 5%; 
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.16), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
        transition: 0.3s;
        font-family: 'Roboto Slab', serif;  
        font-size:14px;  
        color:#333;             
    }
    .flexible-div-header{
        background: #AEEA00;/*rgba(204, 204, 204,0.3);*/
        min-height:40px;
        padding:2%;
        vertical-align: center;
        text-align: center;
        font-family: 'Roboto Slab', serif; 
        font-size: 24px;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
        transition: 0.3s;
    }
    .arrow-up{
        position:absolute;
        top:-10px;
        right:-40px;
    }
    .arrow-down{
        position:absolute;
        top:-10px;
        left:2px;
    }
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
 /*
 function simple_delay(milliseconds){
    var x = 1;
    var y = null; // To keep under proper scope
    
    setTimeout(function() {
        x = x * 3 + 2;
        y = x / 2;
    }, milliseconds);
    return
 }*/
 
 $(function(){
          $( "#arrow_up" ).click(function() {
              $(".flexible-default2").addClass("hold").removeClass("flexible-default2");
              $(".flexible-default").addClass("flexible-default2").removeClass("flexible-default");
              $(".flexible-before").addClass("flexible-default").removeClass("flexible-before");
              $(".flexible-current").addClass("flexible-before","slow").removeClass("flexible-current card","slow");
              $(".flexible-after").addClass("flexible-current card","slow").removeClass("flexible-after","slow");
              $(".hold").addClass("flexible-after").removeClass("hold");
         });
          $( "#arrow_down" ).click(function() {
              $(".flexible-default2").addClass("hold").removeClass("flexible-default2");
              $(".flexible-after").addClass("flexible-default2").removeClass("flexible-after");
              $(".flexible-current").addClass("flexible-after").removeClass("flexible-current card");
              $(".flexible-before").addClass("flexible-current card").removeClass("flexible-before");
              $(".flexible-default").addClass("flexible-before").removeClass("flexible-default");
              $(".hold").addClass("flexible-default").removeClass("hold");
    
          });
          setInterval(function(){$('#arrow_up').click(); }, 4800);
      });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Simple side bar flip slider"
Bootstrap 4.0.0 Snippet by ivanpeter

Related: See More

Questions / Comments:

"Simple side bar flip slider" Bootstrap 4.0.0 Snippet by ivanpeter

Related: See More

Questions / Comments:

"Simple side bar flip slider"
Bootstrap 4.0.0 Snippet by ivanpeter