Recently i wanted to make a flexslider and have the controls in another div. This can be done with the controlsContainer built in option of flexslider.
Basicly it's just a left side column with the slider code '('.flexslider-small'), right side column with text and the controls at the bottom (controls box = '.flexslider-controls-box')
Normally setting: controlsContainer: ".flexslider-controls-box" does this for you. However when there are more than one of these sliders it keeps adding more controls in the same flexslider-controls-box which bugs it and the control doesn't work anymore.
I tried then to incorporate wordpress the_id into the code so that it would target unique control boxes but it doesn't seem to be working?
<div class="flexslider-small" id="<?php the_id(); ?>">
<div class="flexslider-controls-box-<?php the_id(); ?>"></div>
Wordpress wise the previous two divs get the same id :) I then tried to link the id to the controlscontainer as you can see below.
Can anyone point me in the right direction? The code itself doesn't throw any errors it just doesn't work?
Flexslider init code
$('.flexslider-small').flexslider({
animation: 'fade',
touch: true,
slideshow: true,
controlNav: true,
directionNav: false,
smoothHeight: true,
controlsContainer: $('.flexslider-controls-box-' + id_link )
});
var id_link = $(".flexslider-small").attr('id');
By the time .flexslider-small gets initialized, jQuery hasn't ran the variable yet so it probably won't. Also try putting the class name in quotes without the handler.
controlsContainer: '.flexslider-controls-box-' + id_link;
Related
Is there an easy way to implement this? I am having trouble getting it to work properly. I tried following the instructions on the website to have it load at window.onload, but Worklight seems to fire that call before the DOM is even visible, so I couldn't do that. I have some initialization code and so I am calling the following method in that code:
function runSwiper(){
// iDangerous Swiper
var mySwiper = new Swiper('.swiper-container', {
pagination : '.pagination',
loop : true,
grabCursor : true,
simulateTouch : true,
paginationClickable : true
});
}
Yet, all I see in my carousel is just Text. I have two test slides in there currently, but the slide doesn't even seem to work on my Android emulator. Is there anything else I need to be doing for this to work properly? If not, is there something that works as nicely as this that will play nice with Worklight?
I am using worklight version 6.2. I am usingth is: http://www.idangero.us/sliders/swiper/api.php
What I am aiming to do is fade out one div that has information, and fade in another div that has more info and the Swiper present, so initially this swiper will be hidden.
I turns out, in my case, the easiest way to call the swiper to initialize was later on (being that it was in a hidden div) instead of at window.onload. In addition, I had some issues with slides disappearing, which I fixed by having the slides pre-defined in the HTML instead of adding them dynamically.
http://405pixels.gowerpowered.com
I have the slider, and I have been trying to figure out how to make the homepage autoslide?
I tried using firebug to locate the files... Located some .js files that contain some information about the homepage slider... but all the changes and everything I make seem to not be working...
This is a free template I found called BigFoot. I am really interested into learning about how this javascript would work that is why I downloaded in the first place... to learn from the template... If you could point me in the right direction that would be awesome.
Thanks,
Alex
You'll need to replace the actual photo swapping code with whatever you use but the rest will swap out each picture every 5 seconds.
$(document).ready(function() {
var next = $('#right-button');
next.click(function() {
$('#current-picture').fadeOut('fast');
$('#next-picture').fadeIn('fast');
...whatever code you use for this.
});
var scroll = setInterval(function() {
next.trigger("click");
if(picture is last) {
clearInterval(scroll);
}
}, 5000);
});
you are using flex slider so you can use the code below.
jQuery(window).load(function() {
jQuery('.flexslider').flexslider( {
pauseOnHover: true,
slideshow: false,
controlsContainer: ".flex-container"
} );
} );
actually this it the param you need to pass to make slider autostart
slideshow: false,
Let me know if you run into any other issues.
I'm using idangero.us swiper as an image slider and I have the option to enable the pagination and keep track of what image I'm on. The page is loaded via ajax. Here's my script,
$('#a1').bind('pageshow', function(e){
var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
grabCursor: true,
paginationClickable: true })
});
Now when the page is loaded in the DOM, I get the swiper's effects and the pagination is visible, but it doesn't track my images unless I navigate away then go back. Any idea on why this is?
Ah, well now I feel like an idiot. Nothing wrong with how it was calling the swiper, it was bad html. My structure was messed up and was affecting how the swiper would work.
I've got a problem with SlideJS. I dont want to display the previous/next-Buttons, so i've set the Option generateNextPrev to false. But that doesnt do anything.
Does anyone have an idea what am I doing wrong ?
Here is the Code:
$("#articlesSlider1").slides({
generateNextPrev: false,
play: 5000,
pause: 2500,
width: 700,
height: 320,
});
Check first in your HTML markup. And search for code below:
Prev</i>
Next</i>
Delete it, and try again. If you already added that prev/next in your code, generateNextPrev: false, won't work. Normally you don't need to add that link in markup, since Slidejs can generate that prev/next links.
I am trying to make a text-slide-in effect on a web page. I am using the javascript slidesjs library because it seemed like the best fit. However, I cannot make it work when triggered by a web click.
I have a live example running at: http://107.22.173.10
Note that when you click the "GOTO" links nothing happens.
The basic code is as follows and it seems the page is supposed to automatically put '#' anchors in to trigger the slides. I can't make this work, or figure out how to debug this.
$(function(){
// Set starting slide to 1
var startSlide = 1;
// Get slide number if it exists
if (window.location.hash) {
startSlide = window.location.hash.replace('#','');
}
// Initialize Slides
$('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
generatePagination: true,
//play: 5000,
//pause: 2500,
hoverPause: true,
// Get the starting slide
start: startSlide,
animationComplete: function(current){
// Set the slide number as a hash
window.location.hash = '#' + current;
}
});
});
Does anyone see what's going wrong here?
What is the best way to debug this problem?
Is there a better way or library I should be using?
Any advice is appreciated. Thanks!!
You're not following the example from slidesjs.com. See "Basic HTML structure". You're putting only one element in the #slides_container div, and assign all sorts of weird absolute positioning to it, which of course won't work with the animation code.
Copy paste the example first, then start adding your own tweaks concerning style.