I have been using this:
http://owlgraphic.com/owlcarousel/demos/sync.html
But I need to make a small amend, because the 1st carousel requires 3 images displayed at once, rather than just one, and then the middle image is the one aligned with the first.
So all I've done is literally:
sync1.owlCarousel({
singleItem : true,
...
});
to
sync1.owlCarousel({
items : 3,
...
});
But it completely messes up the mapping?
Here:
https://jsfiddle.net/frez1nLd/9/
You need to specify itemsDesktop property. This allows you to preset the number of slides visible with a particular browser width.
$("#sync1").owlCarousel({
autoPlay: 3000,
items : 3,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3]
});
And add two empty items to the first carousel in order to make selected item center.
<div id="sync1" class="owl-carousel">
<div class="item emptyItem"></div>
<div class="item"><h1>1</h1></div>
<div class="item"><h1>2</h1></div>
<div class="item"><h1>3</h1></div>
<div class="item emptyItem"></div>
</div>
Here is the updated FIDDLE
Related
I'm using fullpagejs and AOS to make some divs popping up from the bottom of the page on scroll (or at least that's what I'd like to achieve).
Unfortunately, it is not working.
Yes, I've read the FAQ sections of fullpage and yes, scrollbar is set to true and autoscroll is set to false.
My setup is the following:
<div class="section" id="test">
<div class="slide">
<div class="section">
{someOtherContent}
<!-- div i want to animate is down below -->
<div data-aos="slide-up">test</div>
</div>
</div>
<div class="slide"></div>
<div class="slide"></div>
</div>
$('#test').fullpage({
lazyLoading: false,
lockAnchors: true,
scrollingSpeed: 300,
fitToSection: false,
easing: 'easeInOutCubic',
easingcss3: 'ease',
loopHorizontal: false,
offsetSections: false,
resetSliders: false,
scrollOverflow: true,
scrollOverflowReset: true,
touchSensitivity: 0,
bigSectionsDestination: top,
keyboardScrolling: false,
animateAnchor: false,
recordHistory: true,
controlArrows: false,
verticalCentered: true,
responsiveWidth: 0,
responsiveHeight: 0,
sectionSelector: '.section',
slideSelector: '.slide',
scrollBar:true
//events
afterLoad: function (anchor, index( {
initArrowEventListener()
}
the afterLoad event function simply initialises my menu links (based on the slide index) and the only relevant part is that I initialise AOS when I click on one specific link (as I want the library to work only on a specific page and not everywhere.
So, I load the page, click to navigate on the slider page I want, the function is called (console log proofs it, as well as AOS classes are applied to the relevant div), I can see the scrollbar, but nothing, the div is not popping up from the bottom.
Any idea what am I doing wrong here?
There used to be this pen illustrating the same problem. Click on "About" (the function that initialises AOS is called as the one for the title works as well), scroll to the bottom and you will see a lot of white space. If you inspect the console, AOS is initialised on the element (its classes are applied) but the element never slides up)
Use only the css part of AOS and hook up aos-animate on fullpage.js callbacks.
Add the AOS body data manually
<body data-aos-easing="ease" data-aos-duration="1000" data-aos-delay="0">
Add the aos-init class
$('[data-aos]').each(function(){ $(this).addClass("aos-init"); });
Toggle the aos-animate class with fullpage.js callbacks
$('#fullpage').fullpage({
slidesNavigation: true,
controlArrows: false,
onLeave: function(){
$('.section [data-aos]').each(function(){
$(this).removeClass("aos-animate")
});
},
onSlideLeave: function(){
$('.slide [data-aos]').each(function(){
$(this).removeClass("aos-animate")
});
},
afterSlideLoad: function(){
$('.slide.active [data-aos]').each(function(){
$(this).addClass("aos-animate")
});
},
afterLoad: function(){
$('.section.active [data-aos]').each(function(){
$(this).addClass("aos-animate")
});
}});
Example HTML
<div id="fullpage">
<div class="section" id="section0">
<div class="intro">
<div data-aos="fade-up">
<h1>fade me up!</h1>
</div>
</div>
</div>
<div class="section" id="section1">
<div class="slide">
<div class="intro">
<div data-aos="zoom-in">
<h1>zoom me in!</h1>
</div>
</div>
</div>
<div class="slide">
<div class="intro">
<div data-aos="flip-down">
<h1>flip me down!</h1>
</div>
</div>
</div>
</div>
Currently the owl-carousel that I have employed in my website is far too tall, as it takes up more than the full screen. From the demo on owl-carousel for one image per slide it appears that it is possible to adjust the height. I am using the latest version of owl carousel 2. I also tried wrapping the carousel in another div and adjusting the height of the outer div. I have noticed that I can adjust the width, which also has the effect of adjusting height. However, I would like to adjust the height without adjusting the width. I have attached my javascript and html. Thanks.
<body>
<div id="navigation">
<ul>
<li> <%= link_to "About", pages_about_path, id: "about-link"; %> </li>
<li> <%= link_to "Contact Us", pages_contact_us_path; %> </li>
</ul>
</div>
<div class="wrapper">
<h1><img src="http://cdn-0.famouslogos.us/images/computer-logos/ab-computer-repair-logo.jpg"> </h1>
<div id="carousel" class="owl-carousel owl-theme">
<div class="item"><img src="https://responsivedesign.is/__data/assets/image/0013/5017/Owl-Carousel-2.jpg"></div>
<div class="item"><img style="width:100%; height:auto;" src="http://www.pcgeeksusa.com/wp-content/uploads/2015/01/computer-repair.jpg"></div>
</div>
<div class="contact">
<aside>
<h2>Contact Info</h2>
<p> Nomadic Inc. <br>
Tuscaloosa, AL 35404 <br>
<b> E-mail: </b> nesella#comcast.net <br>
<b> Phone: </b> 205-799-1668
</p>
</aside>
</div>
</div>
</body>
And the javascript:
$ ->
$("#carousel").owlCarousel({
autoplay: true,
items: 1,
loop: true,
navigation : true,
slideSpeed : 300,
paginationSpeed : 400,
singleItem:true
})
Add autoHeight:true it will set the height of the carousel to auto.
See below the correct code
$("#carousel").owlCarousel({
autoplay: true,
items: 1,
loop: true,
navigation : true,
slideSpeed : 300,
paginationSpeed : 400,
singleItem:true,
autoHeight:true
})
The owl carousel normally has a different height according to the images placed in the carousel. To create an height that won't change you can use
autoHeight: true
This changes the height of the carousel according to the biggest image or item inside the carousel. So the plan is to calculate all visible items and change height according to heighest item. Your full JS code would be as follows:
$("#carousel").owlCarousel({
autoplay: true,
items: 1,
loop: true,
navigation : true,
slideSpeed : 300,
paginationSpeed : 400,
singleItem:true
autoHeight:true
})
I'm using flexslider for some carousels, everything works fine. Due to where I need to position the navigation for the carousel, I decided specifying custom navigation would be the best approach. Again, this works fine. This is the code I'm using:
$(window).load(function() {
$('.carousel').flexslider({
animation: "slide",
customDirectionNav: $(".nav-carousel a"),
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 220,
itemMargin: 10,
minItems: 1,
maxItems: 5
});
});
The HTML (just with 1 item for demonstration purposes):
<div class="box">
<header class="header">
<h2>Similar products</h2>
<p>other customers have purchased</p>
<div class="nav-carousel">
<span>Prev</span>
<span>Next</span>
</div>
</header>
<div class="carousel">
<ul class="products slides">
<li class="h-product">
<a href="#" title="TITLE TEXT" class="inner">
<img src="img/temp/products/thumbs/1.jpg" alt="ALT TEXT" class="u-photo" />
<h2 class="p-name">Product title</h2>
<p class="e-description">Product description</p>
<data class="p-rating" value="4">Rating: 4 out of 5</data>
<p class="value"><del>£7.99</del> <data class="p-price" value="6.95">£6.95</data></p>
</a>
</li>
</ul>
</div>
</div>
The issue occurs where I have multiple carousels on the same page. I can see the script is just looking for a div with a class of .nav-carousel, obviously if there is more than 1 it's getting confused and breaking.
I don't want to duplicate the script for a .carousel-2 or even .carousel-3. Although I can't imagine there ever being more than that I'd prefer it to be 'scalable' just incase.
I imagine I'd need to use/specify a parent div then make sure that the .nav-carousel that's targeted is descendant of that div so it only effects the relative child carousel? I tried this with the code I've included in the post but without joy.
Moving the <header> within the .carousel div doesn't seem to break anything in terms of the carousel layout/movement but that alone doesn't fix the navigation.
Hope someone can help with this.
I can't take credit for this, Shikkediel over at css-tricks pointed out the error of my ways. Using a loop worked, here's a working multi-carousel CodePen example:
http://codepen.io/anon/pen/xZGzzN?editors=001
Here's the script:
$(window).on('load', function() {
$('.carousel').each(function() {
$(this).flexslider({
animation: 'slide',
customDirectionNav: $(this).find('.nav-carousel a'),
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 250,
itemMargin: 0,
minItems: 1,
maxItems: 5
});
});
});
For this to work, the navigation .nav-carousel, has to be within the .carousel container.
Hope this is useful for someone else!
I am trying to make the elements in my Owl carousel draggable but it doesn't seem to be working. Here is my set up:
HTML:
<div id="owl" class="owl-carousel">
<div class="my-owl-item"></div>
<div class="my-owl-item"></div>
<div class="my-owl-item"></div>
</div>
JS / jQuery:
jQuery(function(){
//init carousel
$(".owl-carousel").owlCarousel({
autoPlay:false,
rewindSpeed:500,
navigation:false,
pagination:false,
slideSpeed:1500,
mouseDrag:false
});
//set up draggable
jQuery( '.my-owl-item' ).draggable({
start: function( event, ui ) {console.log('dragging');},
helper : 'clone'
});
});
I have disabled mouse dragging for the carousel because I though this might be the cause. The draggable start function is being fired - it outputs the debug message to the console as expected. The element is also being cloned too. So all seems to work except I can't drag it!
Any help much appreciated.
For this you need to edit the owl-carousel.js file to work perfectly with the draggable event because in owl-carousel.js by default it is only draggable in x direction. as i edited the js file so you can achieve the functionality you are looking for.
Here is the link to the Edited js file
https://www.dropbox.com/s/2lia6kkeimka94o/owl.carousel.js
and in you jquery where you are initializing the Owl-carasoul , Just remove the mouseDrag event.and also place the jquery ui at the end of the body tag. h
Here is my configuration
<script>
$(document).ready(function() {
var owl = $("#owl-demo");
owl.owlCarousel({
// Define custom and unlimited items depending from the width
// If this option is set, itemsDeskop, itemsDesktopSmall, itemsTablet, itemsMobile etc. are disabled
// For better preview, order the arrays by screen size, but it's not mandatory
// Don't forget to include the lowest available screen size, otherwise it will take the default one for screens lower than lowest available.
// In the example there is dimension with 0 with which cover screens between 0 and 450px
itemsCustom : [
[0, 2],
[450, 4],
[600, 7],
[700, 9],
[1000, 10],
[1200, 12],
[1400, 13],
[1600, 15]
],
navigation : true
});
});
</script>
and
<script>
jQuery( '.item' ).draggable({
start: function( event, ui ) {console.log('dragging');}
});
</script>
and for the head tag
<!-- Owl Carousel Assets -->
<link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="../owl-carousel/owl.theme.css" rel="stylesheet">
and the html markup is
<div id="demo">
<div id="owl-demo" class="owl-carousel">
<div class="item"><h1>1</h1></div>
<div class="item"><h1>2</h1></div>
<div class="item"><h1>3</h1></div>
<div class="item"><h1>4</h1></div>
<div class="item"><h1>5</h1></div>
<div class="item"><h1>6</h1></div>
<div class="item"><h1>7</h1></div>
<div class="item"><h1>8</h1></div>
<div class="item"><h1>9</h1></div>
<div class="item"><h1>10</h1></div>
<div class="item"><h1>11</h1></div>
<div class="item"><h1>12</h1></div>
<div class="item"><h1>13</h1></div>
<div class="item"><h1>14</h1></div>
<div class="item"><h1>15</h1></div>
<div class="item"><h1>16</h1></div>
<div class="item"><h1>17</h1></div>
<div class="item"><h1>18</h1></div>
<div class="item"><h1>19</h1></div>
<div class="item"><h1>20</h1></div>
</div>
</div>
For one of my client's brochure websites, I am using the Bootstrap carousel. The carousel has 6 panels, each displaying a fairly large image.
To speed initial load time, I'm toying with the idea of only including two panels in the page's source, and somehow using JavaScript to append additional panels after the page is loaded to the DOM. That is, I want to lazy load additional panels to the carousel; hopefully they'll be in place before the carousel needs to display them (my carousel is set to change panels every 4 seconds, so two initial panels gives me 8 seconds to append a third panel).
How can I add panels to an existing carousel?
HTML:
<div id="home_pictures" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="img/carousel_wellness.jpg" alt="Wellness: Comprehensive approaches for your individual needs" />
<div class="container">
<div class="carousel-caption">
<h2>Wellness</h2>
<p class="lead">Comprehensive approaches for your individual needs</p>
</div>
</div>
</div>
<div class="item">
<img src="img/carousel_psychotherapy.jpg" alt="Psychotherapy: Increase your sense of your own well-being" />
<div class="container">
<div class="carousel-caption">
<h2>Psychotherapy</h2>
<p class="lead">Increase your sense of your own well-being</p>
</div>
</div>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#home_pictures" data-slide="prev">‹</a>
<a class="carousel-control right" href="#home_pictures" data-slide="next">›</a>
</div>
This JavaScript, which uses JSON for lightweight object definition and jQuery to append the panels, seems to do the trick nicely:
$(document).ready(function() {
if( $html_js.find('#home_pictures').length ) {
var $carousel_inner=$('div.carousel-inner'),
carousel_panels = [{
"title" : "Massage",
"img_src" : "carousel_massage.jpg",
"description": "Promote healing, relaxation and well-being"
},
{
"title" : "Nutritional Therapy",
"img_src" : "carousel_nutrition.jpg",
"description": "Change behaviors, eat well, feel well"
},
{
"title" : "Reiki",
"img_src" : "carousel_reiki.jpg",
"description": "Facilitate self-healing and equilibrium"
},
{
"title" : "Chiropractic Treatment",
"img_src" : "carousel_chiropractic.jpg",
"description": "Adjustments to realign pain away"
}];
for(var i = 0; i < carousel_panels.length; i++) {
var panel = carousel_panels[i];
$carousel_inner.append( '<div class="item"><img src="img/'+panel.img_src+'" alt="'+panel.title+': '+panel.description+'" /><div class="container"><div class="carousel-caption"><h2>'+panel.title+'</h2><p class="lead">'+panel.description+'</p></div></div></div>' );
}
};
});
The finished result is available at http://fallschurchwellness.com/
This solution applies the answer for "JavaScript loop through json array?"