INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Owl Carousel Media Queries

Owl Carousel Media Queries

(OP)
I want just one image to show if the browser width is fewer than 600 pixels.

CODE --> html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 
<!-- 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="http://www.decorisland.com/uploadedimages/large/wa4200.jpg" 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="http://www.decorisland.com/uploadedimages/large/wa1400.jpg" 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="http://www.decorisland.com/uploadedimages/large/wa1425c.jpg" 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="http://www.decorisland.com/uploadedimages/large/wa4200.jpg" 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="http://www.decorisland.com/uploadedimages/large/wa4410-18.jpg" 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="http://www.decorisland.com/uploadedimages/large/wa1200c.jpg" 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> 

RE: Owl Carousel Media Queries

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

RE: Owl Carousel Media Queries

(OP)
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.

RE: Owl Carousel Media Queries

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:
http://owlgraphic.com/owlcarousel/demos/custom.htm...

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

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close