29 comments found.
I used in the url in the button parameters with a link to an anchor. As soon as the slide changes I automatically return to the slide at the top of my page !!! while I would like to stay at the anchor.
Hi,
you can disable deep linking in Real3D Flipbook > General > Deep linking
Cheers
it’s not real3D flipbook but slideshow : <script> jQuery(document).ready(function ($) { $(”#slider-wrapper”).transitionSlider({ initialSlide: 0, shadow: “off”, grabCursor: 1, stopOnLastSlide: 0, responsive: 1, ratio: 2, ratio1800: 2, ratio1200: 1.8, ratio900: 1.4, ratio600: 1, fullscreen: true, width: 1000, height: 550, autoplay: { enable: 1, delay: 8000, disableOnInteraction: 1, reverseDirection: 0, }, navigation: { enable: true, style: “effect1”, }, keyboard: { enable: 1, }, pagination: { enable: 1, style: “effect4”, clickable: 1, dynamicBullets: 0, type: “bullets”, opacityActive: 0.6, }, hashNavigation: { enable: false, }, buttons: { pauseVisible: 1, muteVisible: 1, startVideoMuted: true, }, loading: { fadeEffect: true, backgroundColor: ”#ffffff”, textColor: ”#CCC”, color: ”#c4c4c4”, style: “style2”, }, slides: [ { src: “assets/slide_img3.jpg”, thumbSrc: “assets/slide_img3.jpg”, elements: [ { type: “text”, content: “Vos rideaux, votre style”, fontSize: 27, textColor: ”#ffffff”, position: { x: “center”, y: “center”, offsetX: 0, offsetY: 35, }, startAnimation: { animation: “fadeInDown”, speed: 750, delay: 0, }, endAnimation: { animation: “fadeOutUp”, speed: 1000, delay: 1000, }, customCSS: “text-shadow: 0 2px 4px rgba(0,0,0,0.50);”, mode: “content”, fontWeight: 500, fontFamily: “Josefin Sans”, color: ”#ffffff”, tablet: { startAnimation: { animation: “fadeInDown”, speed: 750, }, }, mobile: { fontSize: 18, }, letterSpacing: 6, }, { type: “text”, content: “La Confection Sur-Mesure”, fontSize: 80, textColor: ”#ffffff”, position: { x: “center”, y: “center”, offsetX: 0, offsetY: -35, }, startAnimation: { animation: “fadeInUp”, speed: 750, delay: 750, }, endAnimation: { animation: “bounceIn”, speed: 1400, delay: 1000, }, mode: “content”, fontWeight: 400, fontFamily: “Italiana”, color: ”#ffffff”, htmlTag: “h3”, customCSS: “text-shadow: 0 2px 4px rgba(0,0,0,0.50);”, tablet: { fontSize: 50, startAnimation: { animation: “fadeInDown”, speed: 750, delay: 750, }, }, mobile: { fontSize: “32”, }, marginTop: 30, marginBottom: 50, }, { type: “button”, mode: “content”, content: “Commander en ligne”, fontSize: 22, fontWeight: 500, textColor: ”#E94E1B”, backgroundColor: ”#FFF”, url: ”#about”, urlTarget: “self”, position: { x: “center”, y: “center”, offsetX: 0, offsetY: 0, }, startAnimation: { animation: “fadeInUp”, speed: 1250, delay: 1500, }, endAnimation: { animation: “fadeOutUp”, speed: 500, delay: 0, }, color: ”#053422”, fontFamily: “Josefin Sans”, lineHeight: 22, paddingTop: 16, paddingBottom: 16, tablet: { startAnimation: { animation: “fadeInUp”, speed: 1250, delay: 1500, }, }, hover: { backgroundColor: ”#000”, }, paddingRight: 40, paddingLeft: 40, customCSS: “-webkit-transition: all .3s ease-in-out;\n-moz-transition: all .3s ease-in-out;\n-ms-transition: all .3s ease-in-out;\n-o-transition: all .3s ease-in-out;\ntransition: all .3s ease-in-out;”, }, ], transitionDuration: 1500, urlTarget: “_self”, transitionEffect: “roll”, direction: “left”, blur: 0.3, brightness: 0.5, }, { src: “assets/slide_img4.jpg”, thumbSrc: “assets/slide_img4.jpg”, elements: [ { type: “text”, content: “Pour Tous Vos Espaces”, fontSize: 27, textColor: ”#ffffff”, position: { x: “center”, y: “center”, offsetX: 0, offsetY: 35, }, startAnimation: { animation: “fadeInDown”, speed: 750, delay: 0, }, endAnimation: { animation: “fadeOutUp”, speed: 1000, delay: 1000, }, customCSS: “text-shadow: 0 2px 4px rgba(0,0,0,0.50);”, mode: “content”, fontWeight: 500, fontFamily: “Josefin Sans”, color: ”#ffffff”, tablet: { startAnimation: { animation: “fadeInDown”, speed: 750, }, }, mobile: { fontSize: 18, }, letterSpacing: 6, }, { type: “text”, content: “Maison, hôtel, restaurant”, fontSize: 80, textColor: ”#ffffff”, position: { x: “center”, y: “center”, offsetX: 0, offsetY: -35, }, startAnimation: { animation: “fadeInUp”, speed: 750, delay: 750, }, endAnimation: { animation: “bounceIn”, speed: 1400, delay: 1000, }, mode: “content”, fontWeight: 400, fontFamily: “Italiana”, color: ”#ffffff”, htmlTag: “h3”, customCSS: “text-shadow: 0 2px 4px rgba(0,0,0,0.50);”, tablet: { fontSize: 50, startAnimation: { animation: “fadeInDown”, speed: 750, delay: 750, }, }, mobile: { fontSize: “32”, }, marginTop: 30, marginBottom: 50, }, { type: “button”, mode: “content”, content: “Commander en ligne”, fontSize: 22, fontWeight: 500, textColor: ”#E94E1B”, backgroundColor: ”#FFF”, url: ”#about”, urlTarget: “self”, position: { x: “center”, y: “center”, offsetX: 0, offsetY: 0, }, startAnimation: { animation: “fadeInUp”, speed: 1250, delay: 1500, }, endAnimation: { animation: “fadeOutUp”, speed: 500, delay: 0, }, color: ”#053422”, fontFamily: “Josefin Sans”, lineHeight: 22, paddingTop: 16, paddingBottom: 16, tablet: { startAnimation: { animation: “fadeInUp”, speed: 1250, delay: 1500, }, }, hover: { backgroundColor: ”#000”, }, paddingRight: 40, paddingLeft: 40, customCSS: “-webkit-transition: all .3s ease-in-out;\n-moz-transition: all .3s ease-in-out;\n-ms-transition: all .3s ease-in-out;\n-o-transition: all .3s ease-in-out;\ntransition: all .3s ease-in-out;”, }, ], transitionDuration: 1500, urlTarget: “_self”, transitionEffect: “roll”, direction: “left”, blur: 0.3, brightness: 0.5, }, { src: “assets/slide_img5.jpg”, thumbSrc: “assets/slide_img5.jpg”, elements: [ { type: “text”, content: “Artisanat, précision, durabilité”, fontSize: 27, textColor: ”#ffffff”, position: { x: “center”, y: “center”, offsetX: 0, offsetY: 35, }, startAnimation: { animation: “fadeInDown”, speed: 750, delay: 0, }, endAnimation: { animation: “fadeOutUp”, speed: 1000, delay: 1000, }, customCSS: “text-shadow: 0 2px 4px rgba(0,0,0,0.50);”, mode: “content”, fontWeight: 500, fontFamily: “Josefin Sans”, color: ”#ffffff”, tablet: { startAnimation: { animation: “fadeInDown”, speed: 750, }, }, mobile: { fontSize: 18, }, letterSpacing: 6, }, { type: “text”, content: “30 Ans de Savoir-Faire”, fontSize: 80, textColor: ”#ffffff”, position: { x: “center”, y: “center”, offsetX: 0, offsetY: -35, }, startAnimation: { animation: “fadeInUp”, speed: 750, delay: 750, }, endAnimation: { animation: “bounceIn”, speed: 1400, delay: 1000, }, mode: “content”, fontWeight: 400, fontFamily: “Italiana”, color: ”#ffffff”, htmlTag: “h3”, customCSS: “text-shadow: 0 2px 4px rgba(0,0,0,0.50);”, tablet: { fontSize: 50, startAnimation: { animation: “fadeInDown”, speed: 750, delay: 750, }, }, mobile: { fontSize: “32”, }, marginTop: 30, marginBottom: 50, }, { type: “button”, mode: “content”, content: “Commander en ligne”, fontSize: 22, fontWeight: 500, textColor: ”#E94E1B”, backgroundColor: ”#FFF”, url: ”#about”, urlTarget: “self”, position: { x: “center”, y: “center”, offsetX: 0, offsetY: 0, }, startAnimation: { animation: “fadeInUp”, speed: 1250, delay: 1500, }, endAnimation: { animation: “fadeOutUp”, speed: 500, delay: 0, }, color: ”#053422”, fontFamily: “Josefin Sans”, lineHeight: 22, paddingTop: 16, paddingBottom: 16, tablet: { startAnimation: { animation: “fadeInUp”, speed: 1250, delay: 1500, }, }, hover: { backgroundColor: ”#000”, }, paddingRight: 40, paddingLeft: 40, customCSS: “-webkit-transition: all .3s ease-in-out;\n-moz-transition: all .3s ease-in-out;\n-ms-transition: all .3s ease-in-out;\n-o-transition: all .3s ease-in-out;\ntransition: all .3s ease-in-out;”, }, ], transitionDuration: 1500, urlTarget: “_self”, transitionEffect: “roll”, direction: “left”, blur: 0.3, brightness: 0.5, }, ], layerWidth: “80%”, layerHeight: “100%”, tabletSize: 1024, mobileSize: 768, wheelNavigation: { enable: false, stopOnLast: false, }, name: “slider 55”, lightbox: { backgroundColor: “rgba(0, 0, 0, 0.95)”, closeColor: ”#ffffff”, }, layerWidthMobile: “80%”, layerHeightMobile: “100%”, layerWidthTablet: “80%”, layerHeightTablet: “100%”, }); }); </script>
Trying out the demos of 2.20.2 i get JS error “STX.Effects is undefined” and no slider visible… Before i continue on integration i would like to have this fixed / explained… Thanks
For slider videos, is it psoible to use with youtube videos or video, also adding text with animation on them?
Hi, I use the slider with html5 videos and the next video shall be played automatically after one is finished (after the last video the first video should play again). How to do that? Thanks!
Hi How to add texts and button on full-screen video slider, where should i add my text to be on the video slider?
I fixed it, thanks anyway
Hello, you plugin is great but I have a trouble. When the slide change, a ”#” is added in the and of the url and the page scroll to top ? How to resolve it ? Thanks for your answer.
Hi, I have two small question -
Can I position the slide to a specific image via an api call
Thanks
window.slider1 = $("#container").transitionSlider(options)
then go to slide 2 like this
slider1.data("transitionSlider").ev.trigger({type: "goToSlide", slide: 1})
Slide index is 0 based, so index of second slide is 1
Cheers
Hi, I want to THANK YOU for your AWESOME support, by letting me switch to the jQuery version of your Amazing 3D FlipBook script.
How can I add a button that launchs a event to select NEXT slide?. It´s a way to do something like this -> $(”#slider-wrapper”).transitionSlider().NextSlide();
Hi, it is possible like this
var slider = $(”#slider-wrapper”).transitionSlider();
slider.data("transitionSlider").nextSlide()
slider.data("transitionSlider").prevSlide()
There are also slider navigation buttons https://transitionslider.com/docs/jquery/navigation
Cheers
Can you please tell me what templates use the new effects SpinEffect + RadialBlurShader? I sent you a private message a few days ago. Would appreciate a reply.
Hi, I replied to your email 2 days ago.
Cheers
Thanks for your answer
is this compatible with bootstrap? because every time I go to add bootstrap to the index.html file it quits working. is there a certain order the scripts need to be in?
The order of scripts should be like in our HTML examples and templates that are included in the download package. If you still have the issue please email me the link and I will check.
is it possible to run video backgrounds instead of pictures in the slider?
Hi, yes you can have mp4 video as slide background.
Hi, I want to buy this, but I need to know if I can put thumbnails as navigation buttons.
Hi, you mean thumbnails instead of arrows for prev / next slide, or thumbnails of all slides below the slider?
Hi, thumbnails of all slides below the slider.
Ok we will add thumbnails navigation in next update, probably next week.
OK, I would really appreciate this improvement
Hello, a question, can I replace the bullets with small images and have something similar to navigation thumbs ?
Hi, we are working on thumbnails navigation, it will be available in couple of days.
ok thanks i hope for this
Hello, any news about the thumbs functionality ?
Hello again, could you explain to me how to use the lightbox functionality. I have searched for the documentation and nothing appears.
Hi, to enable lightbox for element add this to element config
onClick: {
type: 'lightbox'
}
To change lightbox colors add this to main branch of config
lightbox: {
backgroundColor: 'rgba(0, 0, 0, 0.95)',
closeColor: '#ffffff'
}
Thumbnail navigation will be added very soon 
Hello, thanks for your answer, I have done what you tell me, but I can’t make it work, I must be doing something wrong, can you send me a quick example of where these lines of code are embedded?
This works for image and video elements, here is example of image element with lightbox
{
type: "image",
onClick: {
type: 'lightbox'
},
src: "assets/restaurant_d1.jpg",
...
}
Many thanks for the update! Do I need animate.min.css for a slider without text? Only with pictures? Do I need typeit.min.js for a slider without text? Only with pictures? Do I need webfontloader.js for a slider without text? Only with pictures?
No, you don’t need scripts for animating text or loading fonts if slider doesn’t have text.
thank you!
Can you please tell me in which cases animate.min.css is required? For which elements do I need animate.min.css?
For all elements that have animation.
do you plan to add these Premium templates to the download package? Have a great day
Hi, those 3 templates will be added soon.
thank you very much!
It would be great if the documentation is included in the download package.
The download package contains no documentation. Where can I find the documentation? A random play function would be fantastic.
Hi, here is online documentation https://transitionslider.com/documentation/jquery/#/ What do you mean by random play?
thanks! Play back images in a random order .
I would like to buy this but i need to integrate many Youtube Videos (and choose minute start and minute end). Can you do that for the next update and inform me ?
Hi, youtube video cannot be part of transition effect, only image or mp4 video can be used for transitions (for slide background). We will add new layer element “youtube video” which is displayed over slide background. But if you want to have transition effects between videos you need to use mp4.
fellows is this a stand alone version ? can i stimply download it and copy paste the code to get the desired banner ? or do i need to create it in template and export the code ? any clarity plz.
Hi, slider templates are included in the download package, so you can copy paste the slider code.
Cheers
Hi I just purchased this item but I cannot find the fullscreen template in the download files. The documentation also refers to a deploy and source folder but they are not in the downloaded file either.
Hi, here is the new documentation https://transitionslider.com/documentation/jquery/ You can make any slider fullscreen with option
fullscreen:true;
Cheers
Are you releasing an update with a random play option?
Power Elite Author
Contact the Envato Market Help Team
