I am trying to achieve flexslider on in riotjs app. The slider is working fine but when I set custom item width for the slider, it doesn't. According to docs, it is supposed to work.
self.on('updated', function(){
$('.flexslider').flexslider({
animation: "slide",
// itemWidth: 210,
// itemMargin: 5,
controlsContainer: ".flex-container",
start: function (slider) {
$('.total-slides').text(slider.count);
},
after: function (slider) {
$('.current-slide').text(slider.currentSlide);
}
});
});
riot component:
<rsc-component id="dropBox" class="mybox col-lg-12">
<div class="flexslider">
<ul class="slides">
<li>
<img src="../images/slide1.jpg" alt=""/>
</li>
<li>
<img src="../images/slide2.png" alt=""/>
</li>
</ul>
</div>
</rsc-component>
Give you flexslider a name, and refer to it internally, rather than hunting for it using jquery.
<rsc-component id="dropBox" class="mybox col-lg-12">
<div class="flexslider" name="flexslider">
<ul class="slides">...</ul>
</div>
<script>
...
//store reference to flexslider
this.on('mount',function(){
this.$flexslider = $(this.flexslider); // from the name property in template
});
this.on('updated',function(){
// I would have at a guess that the flexslider needs to recalc itself, so
// destroy it and regenerate.
this.$flexslider.detach().flexslider({...})
});
</script>
</rsc-component>
Related
I am displaying 2 images in a slider one beside another with next and previous icons.
Not able to add one more scenario i.e. onclick of 2nd image in the slider should make a next() call and so on in flexslider.
Example:
Slide#1 is active and Side#2 is semi active image, onclick of "Slide#2" semi-active image area it should become "active" and "Slide#3" should be semi active image and so on.
Demo JSFiddle:
https://jsfiddle.net/pkuwhvqm/
HTML:
<div class="outerWideSlider">
<div class="wideSlider">
<div class="flexslider" data-startat="0">
<ul class="slides">
<li>
<img alt="" src="https://www.solodev.com/assets/flexslider/slide1.jpg">
<div class="text-caption">
<div class="inner">
<h2>Slide #1</h2>
<p>This is the text for slide #1</p>
</div>
</div>
</li>
<li>
<img alt="" src="https://www.solodev.com/assets/flexslider/slide2.jpg">
<div class="text-caption">
<div class="inner">
<h2>Slide #2</h2>
<p>This is the text for slide #1</p>
</div>
</div>
</li>
<li>
<img alt="" src="https://www.solodev.com/assets/flexslider/slide3.jpg">
<div class="text-caption">
<div class="inner">
<h2>Slide #3</h2>
<p>This is the text for slide #1</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
Javscript:
$(document).ready(function () {
$(".wideSlider").each(function () {
var $this = $(this);
var $slider = $this.find(".flexslider");
var startat = $slider.attr("data-startat");
if (startat = 0) {
}
$slider.flexslider({
animation: 'slide',
easing: 'linear', // // Default: swing {NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
// useCSS: false, // Default: true
slideshow: false, // Default: True //Boolean: Animate slider automatically
slideshowSpeed: 7000, // Default: 7000 // Integer: Set the speed of the slideshow cycling, in milliseconds
animationLoop: true, // Default: true
startAt: startat,
controlNav: false,
directionNav: true,
nextText: " ",
prevText: " ",
start: function (slider) {
// $('.wideSlider .text-caption').fadeOut(100);
// var $s = slider.slides.eq(slider.currentSlide);
// $s.find('.text-caption').show();
},
before: function (slider) {
// $('.wideSlider .text-caption').hide();
},
after: function (slider) {
// var $s = slider.slides.eq(slider.currentSlide);
// $s.find('.text-caption').show();
}
});
});
})
Just add the below handler. https://jsfiddle.net/g1mteokv/
$("li").click(function(){
if($(this).prev().hasClass("flex-active-slide")){
$(".flex-next").click();
}else if ($(this).next().hasClass("flex-active-slide")){
$(".flex-prev").click();
}
});
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 use the unslider.js slider script.
By the way I can recommend it to everyone.
I'm trying to add an 'to next slide' button inside a slide.
First I added the same class to the button as the class from the next arrow link. But it doesn't work.
Is there a possibility to do this?
Thank you
**JS**
var unslider = $('.banner').unslider({
complete: function() {},
keys: true,
dots: false,
fluid: false,
nav: false
});
$('.unslider-arrow').click(function() {
var fn = this.className.split(' ')[1];
unslider.data('unslider')[fn]();
});
**HTML snippet**
To next slide
http://jsfiddle.net/qATC9/45/
first you need to set an href like this:
To next slide
to prevent navigation. Then in jQuery
$('.unslider-arrow').click(function() {
unslider.data('unslider').next();
});
see updated FIDDLE
May be this will help you
just use this code
<div class="row">
<div class="col-md-12">
<div class="banner-wrapper">
<div class="banner">
<ul>
<li> To next slide<img src="https://picjumbo.imgix.net/HNCK0785.jpg?q=40&w=1650&sharp=30" /></li>
<li> To next slide<img src="https://picjumbo.imgix.net/HNCK0785.jpg?q=40&w=1650&sharp=30" /></li>
<li> To next slide<img src="https://picjumbo.imgix.net/HNCK0785.jpg?q=40&w=1650&sharp=30" /></li>
</ul>
<div class="banner-controls">
←
→
</div>
</div>
</div>
</div>
Check it here on FIDDLE
I'm creating a header with Struts2 links but somehow I encounter a very weird issue as I input the Struts2 a href link inside the header is encounter syntax error: unrecognized expression error inside jquery. But if I don't put the header tag the link I input will work alright. Does anyone faced this issue? i'm using jquery 1.11.
<%# page language="java" contentType="text/html;" %>
<%# taglib prefix="s" uri="/struts-tags" %>
<!-- this part the link would work -->
<div class="container">
<nav class="pull-left">
<ul class="list-unstyled">
<li class="animated wow fadeInLeft" data-wow-delay="0s">Inventory</li>
<li class="animated wow fadeInLeft">
<s:url namespace="/sales" action="saleshome" var="aURL2" />
<s:a href="%{aURL2}">Test</s:a>
</li>
<li class="animated wow fadeInLeft" data-wow-delay=".2s">Purchase</li>
<li class="animated wow fadeInLeft" data-wow-delay=".3s">Bank</li>
<li class="animated wow fadeInLeft" data-wow-delay=".4s">Job</li>
<li class="animated wow fadeInLeft" data-wow-delay=".5s">Login</li>
<li class="animated wow fadeInLeft" data-wow-delay=".5s">
<s:a namespace="/company" action="newcompany"><s:text name="label.newcompany" /></s:a>
</li>
<li class="animated wow fadeInLeft" data-wow-delay=".5s">
<s:a namespace="/company" action="newuser"><s:text name="label.newuser" /></s:a>
</li>
</ul>
</nav>
</div>
<!-- this part the link would not work -->
<header>
<div class="container">
<nav class="pull-left">
<ul class="list-unstyled">
<li class="animated wow fadeInLeft" data-wow-delay="0s">Inventory</li>
<li class="animated wow fadeInLeft">
<s:url namespace="/sales" action="saleshome" var="aURL2" />
<s:a href="%{aURL2}">Test</s:a>
</li>
<li class="animated wow fadeInLeft" data-wow-delay=".2s">Purchase</li>
<li class="animated wow fadeInLeft" data-wow-delay=".3s">Bank</li>
<li class="animated wow fadeInLeft" data-wow-delay=".4s">Job</li>
<li class="animated wow fadeInLeft" data-wow-delay=".5s">Login</li>
<li class="animated wow fadeInLeft" data-wow-delay=".5s">
<s:a namespace="/company" action="newcompany"><s:text name="label.newcompany" /></s:a>
</li>
<li class="animated wow fadeInLeft" data-wow-delay=".5s">
<s:a namespace="/company" action="newuser"><s:text name="label.newuser" /></s:a>
</li>
</ul>
</nav>
</div>
</header>
I encounter the following errors.
I think the following might be the cause of it. var section = $(this).attr('href'); seems like that part of the code for the link is causing issues.
$(document).ready(function(){
//Navigation menu scrollTo
$('header nav ul li a').click(function(event){
event.preventDefault();
var section = $(this).attr('href');
var section_pos = $(section).position();
if(section_pos){
$(window).scrollTo({top:section_pos.top, left:'0px'}, 1000);
}
});
$('.app_link').click(function(e){
event.preventDefault();
$(window).scrollTo({top:$("#hero").position().top, left:'0px'}, 1000);
});
//Show & Hide menu on mobile
$('.burger_icon').click(function(){
$('header nav').toggleClass('show');
$('header .burger_icon').toggleClass('active');
});
//wow.js on scroll animations initialization
wow = new WOW(
{
animateClass: 'animated',
mobile: false,
offset: 50
}
);
wow.init();
//parallax effect initialization
$('.hero').parallax("50%", 0.3);
//Nice scroll initialization
$("html").niceScroll({
scrollspeed: 50,
autohidemode : false,
cursorwidth : 8,
cursorborderradius: 8,
cursorborder : "0",
background : "rgba(48, 48, 48, .4)",
cursorcolor : '#1f1f1f',
zindex : 999
});
//Testimonials slider initialization
$("#tslider").owlCarousel({
items : 1,
navigation : true,
pagination : false,
slideSpeed : 300,
paginationSpeed : 400,
singleItem: true,
responsive: true,
autoPlay : true,
transitionStyle : "fade"
});
//Mailchimp subscription form initialization
$('#submit_form').submit(function(){
$('#mc_submit').attr('disabled', 'disabled');
processing('icon', 'loading');
});
if($('#submit_form').length){
//Mailchim Subscription form
$('#submit_form').ajaxChimp({
callback: chimpResponce
});
}
//Mail chimp callback function
function chimpResponce(resp) {
if (resp.result === 'success') {
processing('loading', 'icon');
$('#mc_submit').removeAttr('disabled', 'disabled');
$('#submit_form #mc-email').val('');
$('#error_msg').hide();
$('#success_msg').show();
}else{
processing('loading', 'icon');
$('#success_msg').hide();
$('#error_msg').show();
$('#mc_submit').removeAttr('disabled', 'disabled');
}
}
function processing(hide, show){
$('#mc_submit i').removeClass(hide).addClass(show);
}
//Popup video
$('#play_video').click(function(e){
e.preventDefault();
var video_link = $(this).data('video');
video_link = '<iframe src="' + video_link + '" width="500" height="208" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
$('.about_video').append(video_link).fadeIn(200);
});
$('.close_video').click(function(e){
e.preventDefault();
$('.about_video').fadeOut(200,function(){
$('iframe', this).remove();
});
});
});
The error description is pretty explanatory: jQuery cannot use the expression /easyaccount/sales/saleshome as the selector inside $(...).
You are using scrollTo for scrolling to sections. And it seems that along anchor links (href="#somewhere") you have also links with full url. It's obvious that normal urls are not usable as jQuery selectors, so you have to filter links inside event handler.
$('header nav ul li a').click(function(event){
var section = $(this).attr('href');
if (section[0] !== "#") return; // drop the link if the first char is not #
var section_pos = $(section).position();
if(section_pos){
$(window).scrollTo({top:section_pos.top, left:'0px'}, 1000);
}
event.preventDefault();
});
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!