Owl Carousel: can the 'dots' be put absolutely in the bottom

[simonmlewis]

http://owlgraphic.com/owlcarousel/demos/one.html
I need to get the dots that are beneath the image, to be absolutely positioned at the base of the image, rather than under it.

I think the DIV is designed outside of the image DIV, and don't understand the JS hardly enough to get them moved.

Is it a CSS issue, or JS?

[Celauran]

You can use negative margin to move them up.

[simonmlewis]

If you try that yourself, for example:
.owl-pagination
{
margin-top: -25px,
}

The dots all move up but the active one, goes behind the image........?!?!?!

[Celauran]

Works fine for me. You'll likely need to adjust colour and opacity also.

[simonmlewis]

Show me what Css areas I adjusted. I couldn't fathom it.

[Celauran]

Code: Select all

.owl-theme .owl-controls {
    margin-top: -40px;
    text-align: center;
}
.owl-buttons {
    display: none;
}
.owl-theme .owl-controls .owl-page span {
    display: block;
    width: 12px;
    height: 12px;
    margin: 5px 7px;
    border-radius: 20px;
    background: rgb(255, 255, 255) none repeat scroll 0% 0%;
    opacity: 0.8;
}
.owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span {
    opacity: 0.8;
}

[simonmlewis]

Ahh I see what you added. Thanks.

[simonmlewis]

http://owlgraphic.com/owlcarousel/demos/json.html
This one appears to let you add text. I need a slider form this Owl, where I can have text at the bottom of each image in each DIV. With the sliding abilities.

While I can get the text below the image (tho not sure how to adjust height of each item div, the "data" is in an external JSON file.

I did read that you can just embed JSON onto a page:

Code: Select all

              <div id="owl-demo" class="owl-carousel">
              <script id="data" type="application/json">
{
	"owl" : [
	    {"item" : "<span class='item'><img src='17272077z1.jpg' /><p>1</p></span>"},
	    {"item" : "<span class='item'><img src='17272077z1.jpg' /><p>2</p></span>"},
	    {"item" : "<span class='item'><img src='17272077z1.jpg' /><p>3</p></span>"},
	    {"item" : "<span class='item'><img src='17272077z1.jpg' /><p>4</p></span>"},
	    {"item" : "<span class='item'><img src='17272077z1.jpg' /><p>5</p></span>"},
	    {"item" : "<span class='item'><img src='17272077z1.jpg' /><p>6</p></span>"},
	    {"item" : "<span class='item'><img src='17272077z1.jpg' /><p>7</p></span>"},
	    {"item" : "<span class='item'><img src='17272077z1.jpg' /><p>8</p></span>"},
	    {"item" : "<span class='item'><img src='17272077z1.jpg' /><p>9</p></span>"},
	    {"item" : "<span class='item'><img src='17272077z1.jpg' /><p>10</p></span>"},
	    {"item" : "<span class='item'><img src='17272077z1.jpg' /><p>11</p></span>"},
	    {"item" : "<span class='item'><img src='17272077z1.jpg' /><p>12</p></span>"},
	    {"item" : "<span class='item'><img src='17272077z1.jpg' /><p>13</p></span>"},
	    {"item" : "<span class='item'><img src='17272077z1.jpg' /><p>14</p></span>"}
	]
}
</script> 

    </div>

But so far it's producing nothing on screen. No errors, no characters.

[simonmlewis]

Ok I'm not sure you can have two different sliders on the one page. I've tried the "full.html" version of the slider further down, because that is like JSON but it's all internal.

But it doesn't work at all for me, not with the big top slider working.

Any ideas?

[Celauran]

Can you post your code? Throw up a fiddle or paste it all here? Will make troubleshooting this much easier.

[simonmlewis]

I'm now using this.
I've changed no external JS file.
Both sliders work. And I've gotten rid of the second sliders dots, but what's happening now is that the top big slider "one", is not resizing.

I worked out you can change the ID of each slider so the JS and CSS are relative independant. The DIVs and big-slider dots all show and change fine, but the big slider's images now don't resize.

Code: Select all

</div>


    
    <link href="/js/owlslider/css/custom.css" rel="stylesheet">
    
    <link href="/js/owlslider/owl-carousel/owl.carousel.css" rel="stylesheet">
    <link href="/js/owlslider/owl-carousel/owl.theme.css" rel="stylesheet">
    <link href="/js/owlslider/google-code-prettify/prettify.css" rel="stylesheet">
  
    <script src="/js/owlslider/jquery-1.9.1.min.js"></script> 
    <script src="/js/owlslider/owl-carousel/owl.carousel.js"></script>
    <script src="/js/owlslider/bootstrap-collapse.js"></script>
    <script src="/js/owlslider/bootstrap-transition.js"></script>
    <script src="/js/owlslider/bootstrap-tab.js"></script>

    <script>
    $(document).ready(function() {
      $("#owl-big").owlCarousel({
      autoPlay: 2000,
      stopOnHover: true,
      navigation : true,
      slideSpeed : 300,
      paginationSpeed : 400,
      singleItem : true,
      touchDrag: true,
      mouseDrag: true
      });
    });
    </script>
    
    <div id="owl-big" class="owl-carousel owl-theme">
    
   <?php
$query = ("SELECT * FROM static WHERE section = 'bigslider' ORDER BY priority ASC");
$result = $pdo->query($query);
while ($row = $result->fetch(PDO::FETCH_OBJ)) 
      {
			echo "<div><a href='$row->url'><img src='/images/pages/$row->image'></a></div>";
			}
?>
    </div>


 <div class='mainbodybox' style='padding-left: 14px'>

   <div id="owl-multi" class="owl-carousel">
          <div class="item"><img src='/images/pages/17272077z1.jpg' /><br/><p>1</p></div>
          <div class="item"><img src='/images/pages/17272077z1.jpg' /><br/><p>2</p></div>
          <div class="item"><img src='/images/pages/17272077z1.jpg' /><br/><p>3</p></div>
          <div class="item"><img src='/images/pages/17272077z1.jpg' /><br/><p>4</p></div>
          <div class="item"><img src='/images/pages/17272077z1.jpg' /><br/><p>5</p></div>
          <div class="item"><img src='/images/pages/17272077z1.jpg' /><br/><p>6</p></div>
          <div class="item"><img src='/images/pages/17272077z1.jpg' /><br/><p>7</p></div>
          <div class="item"><img src='/images/pages/17272077z1.jpg' /><br/><p>8</p></div>
          <div class="item"><img src='/images/pages/17272077z1.jpg' /><br/><p>9</p></div>
          <div class="item"><img src='/images/pages/17272077z1.jpg' /><br/><p>10</p></div>
          <div class="item"><img src='/images/pages/17272077z1.jpg' /><br/><p>11</p></div>
          <div class="item"><img src='/images/pages/17272077z1.jpg' /><br/><p>12</p></div>

        </div>
  <style>
    #owl-multi .item{
border: 1px solid #cccccc;
        padding: 0px 0px;
        margin: 5px;
        color: #000000;
        text-align: center;
    }
    </style>       
      <script>
    $(document).ready(function() {
      $("#owl-multi").owlCarousel({
              autoPlay: 2000,
      stopOnHover: true,
      pagination: false
      });
    });

    </script> 
 
<div class='mainbodybox'>

owl.theme.css adjusted as follows:

Code: Select all

/*
* 	Owl Carousel Owl Demo Theme 
*	v1.3.3
*/

.owl-theme .owl-controls{
	margin-top: -20px;
	text-align: center;
}

/* Styling Next and Prev buttons */

.owl-theme .owl-controls .owl-buttons div{
display: none;
}
/* Clickable class fix problem with hover on touch devices */
/* Use it for non-touch hover action */
.owl-theme .owl-controls.clickable .owl-buttons div:hover{
	filter: Alpha(Opacity=100);/*IE7 fix*/
	opacity: 1;
	text-decoration: none;
}

/* Styling Pagination*/

.owl-theme .owl-controls .owl-page{
	display: inline-block;
	zoom: 1;
	*display: inline;/*IE7 life-saver */
}
.owl-theme .owl-controls .owl-page span{
	display: block;
	width: 12px;
	height: 12px;
	margin: 5px 7px;
margin-bottom: 15px;
	filter: Alpha(Opacity=50);/*IE7 fix*/
	opacity: 0.8;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
border: 2px solid #ff5500;
	background: #000000;
}

.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span{
	filter: Alpha(Opacity=100);/*IE7 fix*/
	opacity: 1;
}

.owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span {
    opacity: 0.8;
background: #ffffff;
border: 2px solid #ffffff;
}


/* If PaginationNumbers is true */

.owl-theme .owl-controls .owl-page span.owl-numbers{
	height: auto;
	width: auto;
	color: #FFF;
	padding: 2px 10px;
	font-size: 12px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
}

/* preloading images */
.owl-item.loading{
	min-height: 150px;
	background: url(AjaxLoader.gif) no-repeat center center
}

[simonmlewis]

Ok I have sorted it. The problem was a missing class for img in the top slider.
While we are here, I wonder if you might help me sort this.

Rightly or wrongly, I use this to determine device and size to display, and then use CSS for up to 767px and 768 - 3000.

Code: Select all

if ((preg_match("/(iPad|iPhone|BlackBerry|Android|motorola|nokia|panasonic|playbook|ipod|alcatel)/", $_SERVER["HTTP_USER_AGENT"])))
{ echo "<meta name=\"viewport\" content=\"width=device-width, user-scalable=no\">";}
else
{
echo "
<Script>
if($.mobile.media(\"screen and (min-width: 768px)\")) {
    // Check for iPhone4 Retina Display
    if($.mobile.media(\"screen and (-webkit-min-device-pixel-ratio: 2)\")) {
        $('meta[name=viewport]').attr('content','width=device-width, user-scalable=no,initial-scale=.5, maximum-scale=.5, minimum-scale=.5');
    }
}
</script>";
}  

Problem is, on an ipad in Portrait, I was trying to get the width of the main part of the size to be max-width: 950px. But it now had a big gap to the right. But if I do it on a PC shrinking the browser down, it doesn't do that.

Currently our sites on ipads and large devices "zoom" down to the right width of the screen, and then on mobile they are small versions. I want to make 768px wide versions nicer. And thought I could use % rather than px so they resize for iPad.

Is anything I am doing above, causing a possible problem?

If I take the "ipad" reference out, it doesn't have the gap, but doesn't resize the screen down either, on the homepage in particular. I know this cause the top menu ought to be crushing down but isn't.... and does on desktop.