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!
Related
I am using the Slider from Ratchet css, which as far as I know does nothing as far as auto scrolling goes.
Here is the code:
<div class="slider" id="mySlider">
<div class="slide-group">
<div class="slide">
<img src="/assets/img/slide-1.jpg">
<span class="slide-text">
<span class="icon icon-left-nav"></span>
Slide me
</span>
</div>
<div class="slide">
<img src="/assets/img/slide-2.jpg">
</div>
<div class="slide">
<img src="/assets/img/slide-3.jpg">
</div>
</div>
</div>
What I need to do is either with js or css or both have the images scrolling every few seconds.
How can I do this?
Looking into the sliders.js it is based off
https://github.com/thebird/Swipe
So a function like this could work, it might need some tweaking.
window.mySwipe = new Swipe(document.getElementById('slider'), {
startSlide: 2,
speed: 400,
auto: 3000,
continuous: true,
disableScroll: false,
stopPropagation: false,
callback: function(index, elem) {},
transitionEnd: function(index, elem) {}
});
I am using slick.js on my website to show testimonials on my homepage.
When the user is on a mobile device, I want to copmpletely remove the testimonial part. This has the requirement that the images in the slick should not have been loaded already!
This is my code to build the slick :
<div class="quote-carousel">
<div class="quote-wrapper">
<?php if(isset($data['carousel_title'])){ ?>
<h3 class="text-center m-b-2"><?php echo $data['carousel_title'];?></h3>
<?php } ?>
<div class="slick-wrapper">
<div id="slick-single" data-slick='{"autoplaySpeed": 6000}' >
<?php foreach ($testimonial_items as $item) { ?>
<div class="quote-item">
<div class="container">
<div class="row">
<div class="col-md-4 person text-center">
<?php if(isset($item->user_id)){ ?>
<img
alt="Testimonial <?=$item->name?>"
src="<?=base_url()?>design/img/testimonials/<?=$item->image?>"
/>
<p class="name"><?=$item->name?></p>
<p class="function"><?=$item->function?><?php if(isset($item->name_partner)){?> @ <span class="entity"><?=$item->name_partner?></span><?php } ?></p>
</div>
<div class="col-md-8 align-self-center">
<blockquote class="font-medium-3"><span><?=$item->message?></span></blockquote>
</div>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
</div>
</div>
And javascript looks like this:
var slickSingle = $('#slick-single');
slickSingle.slick({
dots: true,
lazyLoad: 'ondemand',
infinite: true,
speed: 300,
autoplay: true,
responsive: [
{
breakpoint: 768,
settings: {
arrows: true,
slidesToShow: 1
}
},
{
breakpoint: 480,
settings: {
arrows: false,
slidesToShow: 1
}
}
]
});
1) I have tried playing around with changing the img tags to div's and setting the image as a background-image via CSS, combined with the styles that slick add's to the img tag, as an inline style element to the div. However this did not work since Slick adds too many stuff all over the place. (plus: this is also not SEO friendly).
2) Another option i've been playing with is changing the element to a element like so:
<picture>
<source srcset="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" media="(max-width: 768px)">
<img
alt="Testimonial <?=$item->name?>"
src="<?=base_url()?>design/img/testimonials/<?=$item->image?>"
/>
</picture>
However, it is still not ideal since it will still download the 1x1 to the browser. (But at least it's better I think?)
3) The third option I see is to use AJAX and create the complete slider in javascript. However I think this is quite complex and i'm not sure whether it will be worse for desktop users (performance wise) ?
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 bxSlider to run a slideshow. I needed to use external captions, which I did by broadly following this answer.
This is working well for the caption itself, but I also want to change the URL that each caption's link goes to.
I've made an attempt at hacking this together myself using the caption code as inspiration, and various answers from this thread, but I've hit a wall of not knowing what I'm doing.
Code is below, does anybody have any suggestions? I'm sure it's super basic but I just don't JavaScript, which means I'm missing lots of core concepts that would allow me to work this out myself.
<div class="bxslider">
<div class="slide id-0">
<img src="/images/index-01.jpg" title="Caption 1" />
</div>
<div class="slide id-1">
<img src="/images/index-02.jpg" title="Caption number two" />
</div>
<div class="slide id-2">
<img src="/images/index-03.jpg" title="Third caption" />
</div>
</div>
<div class="caption-1">
<div class="cap-cont">
<div class="cap-text"><div class="slider-txt"></div></div>
<a class="box-link">Find out more</a>
</div>
</div>
<script type="text/javascript">
$('.bxslider').bxSlider({
auto: true,
speed: 2000,
pause: 6000,
pager: false,
controls: true,
responsive:true,
onSliderLoad: function(currentIndex) {
var slideNum = '.id-' + currentIndex;
$(".slider-txt").html($('.bxslider .slide' + slideNum).find("img").attr("title"));
$(".link-txt").html($('.bxslider .slide' + slideNum).find("a").attr("href"));
},
onSlideAfter: function($slideElement, oldIndex, newIndex) {
$(".slider-txt").html($slideElement.find("img").attr("title"));
$(".link-txt").html($slideElement.find("a").attr("href"));
$("a.link-txt").attr("href", "http://cupcream.com");
}
});
</script>