Bootstrap Snippet Horizontal Product Slider using HTML CSS

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/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
 <marquee style="  scrollamount="6" scrolldelay="90" direction="left" onmouseover="this.stop()" onmouseout="this.start()">
<a target="_blank" href="http://noorstar.pk/products/">
<ul class="list-inline list-unstyled r">
<li class="productbox">
    <img src="http://noorstar.pk/wp-content/uploads/2015/11/A.VEGA-RADARS.jpg" class="img-responsive">
    <div class="producttitle"> VEGA RADARS</div> 
</li>
<li class="productbox">
    <img src="http://noorstar.pk/wp-content/uploads/2015/11/B.-VEGA-GUIDED-WAVE-RADARS.jpg" class="img-responsive">
    <div class="producttitle"> VEGA GUIDED WAVE RADARS</div> 
</li> 
<li class="productbox">
    <img src="http://noorstar.pk/wp-content/uploads/2015/11/C.-VEGA-ULTRASONIC.jpg" class="img-responsive">
    <div class="producttitle"> VEGA ULTRASONIC</div> 
</li>
<li class="productbox">
    <img src="http://noorstar.pk/wp-content/uploads/2015/11/D.-VEGA-CAPACITIVE.jpg" class="img-responsive">
    <div class="producttitle"> VEGA CAPACITIVE</div> 
</li>
<li class="productbox">
    <img src="http://noorstar.pk/wp-content/uploads/2015/11/E.-VEGA-VIBRATION.jpg" class="img-responsive">
    <div class="producttitle"> VEGA VIBRATION</div> 
</li>
<li class="productbox">
    <img src="http://noorstar.pk/wp-content/uploads/2015/11/F.-VEGA-CONDUCTIVE.jpg" class="img-responsive">
    <div class="producttitle"> VEGA CONDUCTIVE</div> 
</li>
<li class=" productbox">
    <img src="http://noorstar.pk/wp-content/uploads/2015/11/G.-VEGA-RADIATION-BASED.jpg" class="img-responsive">
    <div class="producttitle"> VEGA RADIATION BASED</div> 
</li>
<li class="productbox">
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
marquee>a, marquee>a:hover{color:#000; text-decoration:none;}
.productbox {
    width:250px;
    height:auto;
    background-color:#ffffff;
    padding:10px;
    margin-bottom:10px;
     padding: 10px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        background-color: #fff;
        border: solid 1px #cbcbcb;
        transition: all .20s ease-in-out;
}
.productbox img{
    width:235px;
    height:214px;
    }
.producttitle {
    font-weight:bold;
    padding:5px 0 5px 0; 
   width: 235px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
    
}
.producttitle a{
   color:#000;
   text-decoration:none;
    }
.producttitle .btn{
    background-color:#EDEEF0;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Horizontal Product Slider"
Bootstrap 3.3.0 Snippet by asifali

Related: See More

Questions / Comments:

"Horizontal Product Slider" Bootstrap 3.3.0 Snippet by asifali

Related: See More

Questions / Comments:

"Horizontal Product Slider"
Bootstrap 3.3.0 Snippet by asifali