"Horizontal Product Slider"
Bootstrap 3.3.0 Snippet by asifali

<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"> <img src="http://noorstar.pk/wp-content/uploads/2015/11/H.-VEGA-PRESSURE-SERIES.jpg" class="img-responsive"> <div class="producttitle"> VEGA PRESSURE SERIES</div> </li> <li class="productbox"> <img src="http://noorstar.pk/wp-content/uploads/2015/11/I.-VEGA-HYDROSTATIC.jpg" class="img-responsive"> <div class="producttitle"> VEGA HYDROSTATIC</div> </li> <li class=" productbox"> <img src="http://noorstar.pk/wp-content/uploads/2015/11/J.-VEGA-DIFFERENTIAL-PRESSURE.jpg" class="img-responsive"> <div class="producttitle">VEGA-DIFFERENTIAL-PRESSURE</div> </li> <li class=" productbox"> <img src="http://noorstar.pk/wp-content/uploads/2015/11/K.-VEGA-SIGNAL-CONDITIONING-INSTRUMENTS.png" class="img-responsive"> <div class="producttitle"> VEGA SIGNAL CONDITIONING INSTRUMENTS</div> </li> <li class=" productbox"> <img src="http://noorstar.pk/wp-content/uploads/2015/11/L.-VEGA-DISPLAY-INSTRUMENTS.jpg" class="img-responsive"> <div class="producttitle"> VEGA DISPLAY INSTRUMENTS </div> </li> <li class=" productbox"> <img src="http://noorstar.pk/wp-content/uploads/2015/11/M.-VEGA-ISOLATION-AND-PROTECTION-DEVICES.jpg" class="img-responsive"> <div class="producttitle"> VEGA ISOLATION AND PROTECTION DEVICES </div> </li> </ul></a><br> </marquee>
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; }

Related: See More


Questions / Comments: