Develop Reference

Make Slider autoscroll images automatically with js or css or both

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) {}
});

Custom next button for slick slider

I have on the page, there are two identical sliders, but they may be more. I need to make a custom button Next for each of sliders. I try to do so:
HTML
<div class="slider-wrap">
<div class="slider">
<div class="slider-item">Slide 1</div>
<div class="slider-item">Slide 2</div>
<div class="slider-item">Slide 3</div>
</div>
<button id="next">Next ></button>
</div>
<div class="slider-wrap">
<div class="slider">
<div class="slider-item">Slide 1</div>
<div class="slider-item">Slide 2</div>
<div class="slider-item">Slide 3</div>
</div>
<button id="next">Next ></button>
</div>
jQuery
$('.slider').slick({
dots: true,
nextArrow: $('#next')
});
Demo: http://codepen.io/fabric/pen/bwprxJ
Update:
Second demo: http://codepen.io/fabric/pen/KgzZVz
If I click on the next button of the first slide, then the slide is changed of the second. And if the second, then nothing works. How to fix it?

Add unique ids+ class to each slider & navigation
$('.slider').slick({
dots: true,
nextArrow: $('#next')
});
$('.slider2').slick({
dots: true,
nextArrow: $('#next2')
});
http://codepen.io/anon/pen/QKNxNj
for your second example you change the navigation id to a class
$('.slider').slick({
dots: true
});
$('.next').click(function(){
$(this).prev().slick('slickNext');
});
http://codepen.io/anon/pen/vXGAxb

A more elegant solution might be to trigger off a class name, and then create nextArrow events for each instance of that class.
$('.slider-wrap').each(function (index, sliderWrap) {
var $slider = $(sliderWrap).find('.slider');
var $next = $(sliderWrap).find('.next');
$slider.slick({
dots: true,
nextArrow: $next
});
});
And change the button id's to classes. This has the added benefit of giving you a copy/paste'able template for variable amounts of sliders on a single page without having to create unique id's each time.
*edit: working solution http://codepen.io/nominalaeon/pen/gwAdjd

You should use unique ids for this
$('#slider1').slick({
dots: true,
nextArrow: $('#next1')
});
$('#slider2').slick({
dots: true,
nextArrow: $('#next2')
});
http://codepen.io/pranesh-r/pen/qakKNY

Use jQuery to write URL in bxslider external caption

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>

Flexslider carousel custom nav - multiple on same page

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!

Is it possible to set active panel of Jquery Accordion dynamically while calling?

I have a situation where I am calling a greybox popup window with Jquery Acoridon from main page with links and would like to know if it is possible to set default active panel for acordion while calling it.
Here is sample:
In my main page this is the HTML:
<a href="example.php" id="1" onclick="return parent.GB_showCenter('Example.', this.href, 400, 600)" target="_blank">
Panel 1
</a>
<a href="example.php" id="2" onclick="return parent.GB_showCenter('Example.', this.href, 400, 600)" target="_blank">
Panel 2
</a>
<a href="example.php" id="3" onclick="return parent.GB_showCenter('Example.', this.href, 400, 600)" target="_blank">
Panel 3
</a>
Here is the Javascript on example.php:
$(function() {
$( "#acordion" ).accordion({ active: 0, collapsible: true, autoHeight: false });
This is html part of example.php
<div id="acordion">
<h3>Panel 0</h3>
<div>Do something # Panel 1</div>
<h3>Panel 1</h3>
<div>Do something # Panel 2</div>
<h3>Panel 2</h3>
<div>Do something # Panel 3</div>
</div>
I set panel 0 as default active panel and this opens panel 0 as active panel whenever I open that page. Just want to set panel 1 or panel 2 as active panel while opening with link 2 or link 3.

You need to pass default panel value to the page, e.g. in hash part of url:
<a href="example.php#1" id="1" onclick="return parent.GB_showCenter('Example.', this.href, 400, 600)" target="_blank">
Panel 1
</a>
Then just read it with javascript: document.location.hash, and use as default value for your accordion.
$(function() {
var hash = document.location.hash;
$( "#acordion" ).accordion({ active: hash, collapsible: true, autoHeight: false });
});