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!

Register Log in
  • 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 Media Queries

Status
Not open for further replies.
makamo66

makamo66

Technical User
Jul 24, 2010
13
US
I want just one image to show if the browser width is fewer than 600 pixels.
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({
    loop:true,
    responsiveClass:true,
    responsive:{
        0:{
            items:1,
            nav:true
        },
        600:{
            items:1,
            nav:false
        },
        1000:{
            items:5,
            nav:true,
            loop:false
        }
    }
});
 
});
</script>
</body>
</html>
 
Sort by date Sort by votes
And what is the problem?

As it stands your code shows 6 images one on top of the other.

What exactly is the end result you are looking for? 1 image? Which one out of the six? You need to explain.




----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
It's not really media queries but it's responsive design. The six images get floated next to each other via the javascript and I want just one image to show when the browser width is fewer than 600 pixels.
 
Upvote 0 Downvote
So you just want a single faucet, with no option to scroll when the width is less than 600px?

If what you want is for a single image to appear but still be able to scroll, the carousel JS already has settings for that:
Code: 
 owl.owlCarousel({
      items : 10, //10 items above 1000px browser width
      itemsDesktop : [1000,5], //5 items between 1000px and 901px
      itemsDesktopSmall : [900,3], // betweem 900px and 601px
      itemsTablet: [600,2], //2 items between 600 and 0
      itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
  });


I suggest reading the website for the carousel, and understanding how it works.

Additionally, try adding this to your header:

Code: 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">

So mobile devices adjust correctly.






----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

makamo66
  • Locked
  • Question
Owl Carousel Responsive Design
Replies
1
Views
42
makamo66
makamo66
Krus1972
  • Locked
  • Question
Start and then Pause Embedded Media Player
Replies
0
Views
33
Krus1972
Krus1972
bigbird3156
  • Locked
  • Question
auto play a .dat file through media player
Replies
1
Views
42
BillyRayPreachersSon
BillyRayPreachersSon
NNNNN
  • Locked
  • Question
media player
Replies
1
Views
27
nickdel
nickdel
gbgb
  • Locked
  • Question
carousel vertical slide show
Replies
14
Views
78
BillyRayPreachersSon
BillyRayPreachersSon

Part and Inventory Search

Sponsor

Back
Top