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

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4434
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post by 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?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6425
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Owl Carousel: can the 'dots' be put absolutely in the bo

Post by Celauran »

You can use negative margin to move them up.
simonmlewis
DevNet Master
Posts: 4434
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Owl Carousel: can the 'dots' be put absolutely in the bo

Post by 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........?!?!?!
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6425
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Owl Carousel: can the 'dots' be put absolutely in the bo

Post by Celauran »

Works fine for me. You'll likely need to adjust colour and opacity also.
Attachments
Screen Shot 2015-06-18 at 2.20.41 PM.png
simonmlewis
DevNet Master
Posts: 4434
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Owl Carousel: can the 'dots' be put absolutely in the bo

Post by simonmlewis »

Show me what Css areas I adjusted. I couldn't fathom it.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6425
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Owl Carousel: can the 'dots' be put absolutely in the bo

Post by 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
DevNet Master
Posts: 4434
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Owl Carousel: can the 'dots' be put absolutely in the bo

Post by simonmlewis »

Ahh I see what you added. Thanks.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4434
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Owl Carousel: can the 'dots' be put absolutely in the bo

Post by 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4434
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Owl Carousel: can the 'dots' be put absolutely in the bo

Post by 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?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6425
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Owl Carousel: can the 'dots' be put absolutely in the bo

Post by Celauran »

Can you post your code? Throw up a fiddle or paste it all here? Will make troubleshooting this much easier.
simonmlewis
DevNet Master
Posts: 4434
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Owl Carousel: can the 'dots' be put absolutely in the bo

Post by 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
}
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4434
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Owl Carousel: can the 'dots' be put absolutely in the bo

Post by 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply