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) ?
Related
I am working on a website and there seems to be conflicting elements.
I started with a template that contains a lot of "borrowed" CSS and JS elements from different places, and now I am trying to add a Slick slideshow, and there are conflicts in either the JS or the CSS that prevent me from editing the Slick slider (parts of the slick-slider code were already present in the "Organic Farm" template).
Right now I have js/core.min.js, js/script.js and js/slick.js being loaded into the page, and then at the bottom of the index page:
<script type="text/javascript">
$(document).ready(function(){
$('.swiper-slide').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
centerMode: true,
variableWidth: true,
});
});
</script>
The HTML portion is:
<section class="section">
<div class="swiper-container swiper-slider swiper-custom" data-height="35.10416666666667%" data-min-height="375px" data-index-bullet="false" data-slide-effect="swipe" data-autoplay="5000">
<div class="swiper-wrapper swiper-wrapper-custom">
<div class="swiper-slide" data-slide-bg="images/ergfer1.jpg">
<div class="swiper-slide-caption">
<div class="container text-center">
<div class="row justify-content-center">
<div class="col-md-9 col-lg-8 top">
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide" data-slide-bg="images/gdrger.jpg">
<div class="swiper-slide-caption">
<div class="container text-center">
<div class="row justify-content-center">
<div class="col-md-9 col-lg-8 top">
</div>
</div>
</div>
</div>
</div>
Is there a way to find out why my custom script is not active? The arrows are also not showing up. For anything HTML and CSS I use the Inspector of Firefox, but here I'm really stumped.
Two things to consider:
1) When using slick.js, it is customary to add it to the element which is the parent of a set of elements which are then converted into slides. For example:
<div id="slide-wrapper">
<div class="my-slide">...</div>
<div class="my-slide">...</div>
<div class="my-slide">...</div>
</div>
$('.slide-wrapper').slick({
...
});
In your case, that would mean adding Slick to swiper-wrapper:
$('.swiper-wrapper').slick({
...
});
2) More likely the problem is that you have a conflict with the setup of a different slide show library altogether, Swiper.js (https://swiperjs.com/api/), which uses classes like swiper-container, swiper-wrapper and swiper-slide. To implement that slideshow, you would have to include that library on your page and initialize the slideshow with something like:
var mySwiper = new Swiper('.swiper-container', {
speed: 400,
spaceBetween: 100
});
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) {}
});
Trying to create an Owl Carousel (in Wordpress) that loops through user testimonials. The testimonials are added via custom post types in the wordpress dashboard. There is already content there for me to use and test.
The Owl Carousel has been registered in my custom script.js file and loop seems to working correctly. My issue that the loop seems to be pulling in the custom post types correctly and the owl carousel is being triggered in the browser.
However when I view the carousel in the browser none of the content appears. Viewing the source code shows the content but doesn't seem to display in the browser. Am i missing something completely obvious? Please help!
screen shot snippet when inspecting from browser
$("#footer-testimonials").owlCarousel({
center: true,
singleItem:true,
loop:true,
margin:10,
autoplay: true,
nav:true
});
<div id="footer-testimonials" class="owl-carousel owl-theme">
<?php while ( $testimonials->have_posts() ) : $testimonials->the_post(); ?>
<?php
$content = get_the_content();
if (strlen($content) > 200) {
$summary = substr($content, 0, strrpos(substr($content, 0, 200), ' ')). '...';;
} else{
$summary = $content;
}
?>
<?php $link = get_permalink($testimonials->post->ID);?>
<div class="item">
<li class="" style="list-style-type: none;">
<div itemprop="review" itemscope itemtype="http://schema.org/Review">
<div class="testimonial-text">
<span itemprop="reviewBody"><?php echo $summary; ?> </span>
</div>
<div class="slide-content">
<a itemprop="url" href="<?php echo $link ?>"><h3 class="testimonial-name text-center"><span itemprop="name"><?php the_title(); ?></span></h3></a>
</div>
</div>
</li>
</div>
<?php endwhile; ?>
</div>
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>
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!