I am using JSSOR Content Slider.
I want to have multiple right arrows in slides.. Like one will be the default one and other can we put it inside the content when user clicks the other arrow button it should take us to next slide..
Screenshot is also attached..
Please help me on this.
Please use api to do this job.
You can put any arrow in slide, and call api when user click.
jQuery(document).ready(function ($) {
var options = {
$AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
$DragOrientation: 3 //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
function ArrowClickEventHandler() {
jssor_slider1.$PlayTo(slideIndex); //slideIndex is index of slide
}
$("#yourarrow").bind("click", ArrowClickEventHandler);
});
Related
I found a great example for this approach and it works fairly well but it starts changing the opacity when the TOP of the element scrolls off the page. Unfortunately with a larger element the visibility (opacity decrease) starts way too soon. I'm trying to figure out how to start lowering the opacity when the bottom of the element is in near proximity to the top of the top of the screen so that all elements start fading at the same time in relationship to their bottom (not their top).
Any ideas on how to accommodate that with this code? I like this code in terms of being able to control speed of the opacity change as well. Maybe leveraging element height?
Thanks!!
<script type="text/javascript">
$(function() {
var documentEl = $(document),
fadeElem = $('.fade-scroll');
documentEl.on('scroll', function() {
var currScrollPos = documentEl.scrollTop();
fadeElem.each(function() {
var $this = $(this),
elemOffsetTop = $this.offset().top;
if (currScrollPos > elemOffsetTop) $this.css('opacity', 1 - (currScrollPos-elemOffsetTop)/200); /* this number effects speed of fade aka opacity reduction*/
});
});
});
</script>
is it possible to show the active/selected element in the screen visible while selected, with the slick slider?
currently, I have a category on the page that has a swipe/slide feature implemented with a slick slider for mobile view
when I select any menu from the last category or any selected, it's not visible when it is active/selected
sharing image for reference:
there are 4 categories page 1 page 2 page 3 page 4 in the page where page 4 is already selected which has a border-button: yellow when it is selected, but as you can see in the reference image it is not visible on the screen, the user needs to slide category to check the selected one
any idea, if this can be done from slick or CSS?
if(jQuery(window).width() < 640) {
jQuery('#category').slick({
dots: false,
infinite: false,
speed: 300,
slidesToShow: 1,
centerMode: false,
variableWidth: true,
prevArrow: false,
nextArrow: false,
mobileFirst: true
});
}
Having 360+ transition effects is cool, but I have only 10 slides. How can I give them fancy transitions equal chance to show off?
The transition effect is defined in option object before the JssorSlider object is created. It seems to me I can only pick 1 of the 360 and set it in the option. Can I have random transition effect for each transition?
A.K.A, after the JssorSlider is created, can I still apply new option values to it?
You can specify a transition array with multi transitions. And you can set $TransitionsOrder: 0 to let it play transition randomly.
jQuery(document).ready(function ($) {
//Define an array of slideshow transition code
var _SlideshowTransitions = [
{ code1 },
{ code2 },
{ code3 }
];
var options = {
$AutoPlay: true,
$SlideshowOptions: {
$Class: $JssorSlideshowRunner$,
$Transitions: _SlideshowTransitions,
$TransitionsOrder: 0, //The way to choose transition to play slideshow, 1: Sequence, 0: Random
$ShowLink: true
}
};
var jssor_slider1 = new $JssorSlider$('slider1_container', options);
});
After the JssorSlider is created, you can also set transitions dynamically by api call $SetSlideshowTransitions(transArray).
jssor_slider1.$SetSlideshowTransitions(transArray);
Reference:
http://www.jssor.com/development/slider-with-slideshow-jquery.html
http://www.jssor.com/development/reference-options.html
http://www.jssor.com/development/reference-api.html
I embedded Jssor slider (Image gallery with vertical thumbnail) in my WordPress (in the template of a Custom Post-type), according to the instructions at the page:
http://www.jssor.com/development/embed-jssor-slider-into-blogger-post.html
I would like:
to remove the autoplay
to have one only type of transition (fade) and to remove all others
(rotate, zoom, etc.)
Can you help me please?
jssor_slider1_starter = function (containerId) {
var _SlideshowTransitions = [
//Fade
{ $Duration: 1200, $Opacity: 2 }
];
var options = {
$SlideshowOptions: { //[Optional] Options to specify and enable slideshow or not
$Class: $JssorSlideshowRunner$, //[Required] Class to create instance of slideshow
$Transitions: _SlideshowTransitions, //[Required] An array of slideshow transitions to play slideshow
$TransitionsOrder: 1, //[Optional] The way to choose transition to play slide, 1 Sequence, 0 Random
$ShowLink: true //[Optional] Whether to bring slide link on top of the slider when slideshow is running, default value is false
}
};
var jssor_slider1 = new $JssorSlider$(containerId, options);
};
Reference: demos-no-jquery/simple-fade-slideshow.source.html
I would like 3 tiles: previous, current, next.
For instance, when the user move from current to next, I would like a new next tile to be added and the old previous tile to be removed.
Is there any specific javascript function which could be used ?
Or in which function should it be implemented ? (OnPark?)
Any idea, how to implement it ?
Thanks
Thanks Jssor. It works fine. For information, this is my "do something treatment"
if (slideIndex > -1 && fromIndex > -1) {
// filter first access to keep only slide changement
var difference=slideIndex-fromIndex;
if (difference === 1 || difference === -2){
//next tile was just requested
var replaceIndex=(slideIndex+1)%3;
replaceImage(replaceIndex, nextImageUrl);
} else {
//previous tile was just requested
var replaceIndex=(2+slideIndex)%3;
replaceImage(replaceIndex, previousImageUrl);
}
}
function replaceImage(index,url){
// I have add the attributes class="tilei" where i = 0,1 or 2
// inside the tags <img u="image" ...
$('.tile'+index).attr("src",url).load(function(){
var fillHeight=this.height*720/this.width;
var top=(1130-fillHeight)/2;
$('.tile'+index).attr("style","width: 720px; height: "+fillHeight+
"px; top: "+top+"px; left: 0px; position: absolute;");
});
}
Would you do this image replacement in another way to avoid duplication code with the Jssor API, or to block any interaction during image loading ? Sincerely, Didier
You can use your own 'prev' and 'next' buttons.
You can call $Prev or $Next method when a button is clicked.
For example,
jssor_slider1.$Prev();
jssor_slider1.$Next();
And you can display/hide/alter any button when the slider parks.
<script>
jQuery(document).ready(function ($) {
var options = {
$AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
$DragOrientation: 3 //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
function SlideParkEventHandler(slideIndex, fromIndex) {
//do something to display/hide/alter any button
}
jssor_slider1.$On($JssorSlider$.$EVT_PARK, SlideParkEventHandler);
});
</script>