Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Owl Carousel Responsive Design

Status
Not open for further replies.

makamo66

Technical User
Jul 24, 2010
13
US
I got my responsive design to work with my test page but it doesn't work at the actual website. The website is Link
The test page is as follows:

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Owl Carousel</title>
<style>

#products-scroll .item{
  margin: 3px;
  text-align: center;
}

#products-scroll .item:hover a{
	color:#153d4d !important;
}

#products-scroll .item img{
  display: block;
  width: 100%;
  height: auto;
}
#products-scroll .item span{
	padding:5px;
	margin:0 auto;
	display:block;
}
#products-scroll .item a, #products-scroll .item a:visited
{
	text-decoration:none;
	color:inherit;
}
.brand-price {
	display:block;
	width:90%;
	margin:0 auto;
}
.brand-price .new-price {
	float:right;
	font-family: Arial;
	color: #153d4d;
	font-size: 18px;
	font-weight: 400;
}
.brand-price .old-price {
	float:left;
	font-family: Arial;
	color: #b8b8b8;
	font-size: 14px;
	font-weight: 400;
	text-decoration:line-through;
}
</style>
<link rel="stylesheet" href="carousel/owl-carousel/owl.carousel.css">
 
<!-- Default Theme -->
<link rel="stylesheet" href="carousel/owl-carousel/owl.theme.css"> 
 
<!--  jQuery 1.7+  -->
<script src="[URL unfurl="true"]https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>[/URL]
 
<!-- Include js plugin -->
<script src="carousel/owl-carousel/owl.carousel.js"></script>
</head>

<body>

<div id="products-scroll">
          
  <div class="item"><a href="#"><img src="[URL unfurl="true"]http://www.decorisland.com/uploadedimages/large/wa4200.jpg"[/URL] alt="KITCHEN FAUCET" /></a><a href="#"><span>KITCHEN FAUCET</span></a><div class="brand-price"><span class="old-price">$1,495.00</span><span class="new-price">$1,196.00</span></div></div>
   
  
  <div class="item"><a href="#"><img src="[URL unfurl="true"]http://www.decorisland.com/uploadedimages/large/wa1400.jpg"[/URL] alt="FAUCET W/LEVER HANDLES" /></a><a href="#"><span>FAUCET W/LEVER HANDLES</span></a><div class="brand-price"><span class="old-price">$725.00</span><span class="new-price">$580.00</span></div></div> 
   
  
  <div class="item"><a href="#"><img src="[URL unfurl="true"]http://www.decorisland.com/uploadedimages/large/wa1425c.jpg"[/URL] alt="COLD ONLY FILTRATION FAUCET" /></a><a href="#"><span>COLD ONLY FILTRATION FAUCET</span></a><div class="brand-price"><span class="old-price">$660.00</span><span class="new-price">$528.00</span></div></div>
  
 
  <div class="item"><a href="#"><img src="[URL unfurl="true"]http://www.decorisland.com/uploadedimages/large/wa4200.jpg"[/URL] alt="KITCHEN FAUCET W/BUILT-IN DIVERTER" /></a><a href="#"><span>KITCHEN FAUCET W/BUILT-IN DIVERTER</span></a><div class="brand-price"><span class="old-price">$1,495.00</span><span class="new-price">$1,196.00</span></div></div>  
   
          
  <div class="item"><a href="#"><img src="[URL unfurl="true"]http://www.decorisland.com/uploadedimages/large/wa4410-18.jpg"[/URL] alt="KITCHEN FAUCET W/PRE-RINSE SPRAY" /></a><a href="#"><span>KITCHEN FAUCET W/PRE-RINSE SPRAY</span></a><div class="brand-price"><span class="old-price">$3,675.00</span><span class="new-price">$2,940.00</span></div></div>
   
  
  <div class="item"><a href="#"><img src="[URL unfurl="true"]http://www.decorisland.com/uploadedimages/large/wa1200c.jpg"[/URL] alt="COLD ONLY FILTRATION FAUCET" /></a><a href="#"><span>COLD ONLY FILTRATION FAUCET</span></a><div class="brand-price"><span class="old-price">$515.00</span><span class="new-price">$412.00</span></div></div> 

</div>
<script>
$(document).ready(function() {
 
  $("#products-scroll").owlCarousel({
	
      items : 5,
      itemsDesktop : [1199,3],
      itemsDesktopSmall : [979,3]
 
});
 
});
</script>

</body>
</html>
 
It's the new products photo gallery that doesn't work.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top