Im trying to get a Bootstrap v4 Slider to work.
Its supposed to have text to the right of the slider and this text is meant to change with each slide.
I have added in the required CSS/JS but the slider will not initialize.
Link to JS FIDDLE
My JS:
<script>
$( document ).ready(function() {
//set here the speed to change the slides in the carousel
$('#features').carousel({});
//Loads the html to each slider. Write in the "div id="slide-content-x" what you want to show in each slide
$('#carousel-text').html($('#slide-content-0').html());
// When the carousel slides, auto update the text
$('#features').on('slid.bs.carousel', function (e) {
var id = $('.item.active').data('slide-number');
$('#carousel-text').html($('#slide-content-'+id).html());
});
});
</script>
looks like your markup in the example is not sufficient.
you have one .carousel-inner div container without .carousel-item inside.
which of course is just one slide.
try to follow the example provided by the bootstrap documentation
put your #slide-content-x containers inside several .carousel-inner div's and remove your JS workaround for that.
you do not need any JS. it's self-initializing.
see my working example here: https://jsfiddle.net/y8h5oqfw/2/
Related
I want to truncate the text of the Bootstrap carousel .carousel-caption element. I am using shave.js to truncate the text. However, the truncating only works on the first .carousel-caption element.
I`ve created a jsfiddle to demonstrate my problem: jsfiddle
When I remove the CSS class carousel-inner from the carousel, the truncating works perfectly on booth .carousel-caption elements.
I am not pretty sure about the issue, but I think it's due to the dynamic behavior of the carousel so the shave code will only work on the first caption because it's visible and its height is set so your code should also be dynamic to call the shave funcion for each slide.
An idea is to use the event provided by the carousel component and call the shave function there.
$('#carousel-example-generic').on('slid.bs.carousel', function () {
$(".carousel-caption").shave(70);
})
slid.bs.carousel : This event is fired when the carousel has completed
its slide transition. ref
Full code : https://jsfiddle.net/dpnpo4o7/2/
I used the jQuery version of the plugin in the code above but it works the same with the JS version:
$('#carousel-example-generic').on('slid.bs.carousel', function () {
shave(".carousel-caption", 70);
})
Full code : https://jsfiddle.net/dpnpo4o7/3/
I went through the fiddle. And shave must be finding those second captions but since it is invisible at that moment, it is failing to do that.
Solution: You might want to capture the prev and next events and then try your code.
I am using bootstrap carousel but I need a very simple thing to be done. My carousel is placed in the bottom of the page and I want to stick to the 1st slide of the carousel until the user reaches this section. As soon as the user will reach the section,the carousel will start playing. I do not know how to achieve this. Please help me with ideas.
Thanks in advance!
According to http://www.w3schools.com/bootstrap/bootstrap_carousel.asp
The .slide class adds a CSS transition and animation effect, which
makes the items slide when showing a new item. Omit this class if you
do not want this effect.
So all you need to do is to add that class when the user scrolls to that element...
As in, for the example given on the link I mentioned above, the element with id='myCarousel' must be given the .slide class.
Hence, using the jquery, the code will be as follows:
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop()>=($("#myCarousel").offset().top){
$("#myCarousel").addClass("slide");
//ANYTHING YOU WANT TO DO WHEN THE USER SCROLLS TO YOUR CAROUSEL.
}
})
});
NOTE: CODE NOT TESTED.
You can do it like that.
After doing quite a lot of research,finally I got this solution.I have mangaged to go back to the first carousel when I reach a specific portion.(Here the section where carousel does exist)
My code is:
$(document).ready(function(){
$(window).scroll(function(){
console.log($("#myCarousel").offset().top);
if($(window).scrollTop()>=$("#myCarousel").offset().top-70 && $(window).scrollTop()<2450 )
{
var index = $('.slides li').index($('.slides li:first'));
console.log(index);
$('.flexslider').data("flexslider").flexAnimate(index);
}
})
});
I'm trying to make a custom slider for a few testimonials. The picture below illustrate how it should work. The first testimonial is highlighted and when the user clicks on the next testimonial the yellow background should slide to it, the font color of the name and company should change and also the actual testimonial text should slide.
I managed to make a functional version, which you can see in this fiddle or live on this website. Any improvements and explanations will be highly appreciated (I'm still very new to jQuery).
Here is the jQuery code I used:
$("div.container-slider").click(
function () {
$("div.active-slide").toggleClass("animate", 1000, function () {
$("div.mike").toggleClass("current-font", function () {
$("span").toggleClass("company-current");
}),
$("div.neil").toggleClass("inactive-slide", function () {
$("span").toggleClass("company");
});
}),
$("div.testimonial-text").slideToggle("slow", function () {
$("div.testimonial-text-2").toggleClass("display-none");
});
});
Problems:
How can I make the font color and weight change more subtle?
How can I target specific span codes, because right now the script changes the span color everywhere on the website?
How can I make the testimonial-text slide more smoothly (similar to the yellow background)?
It looks like you're already using CSS transitions. Have you tried fiddling with them?
Use this to limit scope to the current element, as in $(this).find('span')...., or use index (eq()) to target by slide, or give the relevant spans a class to target.
I'm not sure why you're toggling your display-none class, but that's
probably causing the abruptness. Try removing that.
I am using Jcarousel from http://sorgalla.com/jcarousel/examples/ajax/ and it is working with no issues. How can I make the image rollover on mouse hover event?
What is the js code needs to be implemented and where?
Thank you
based on the example given, there's a div called "jcarousel"
so on your page load after jcarousel has been initialized add something like
$('#jcarousel ul li img').hover(function(){
//do what you want to do here
});
Please check this link www.aboud-creative.com/demos/mckinley3.
There I have a jQuery Accordion with jCarousel inside "Developments" section of it. I use standard fadeIn function for the logo, accordion and a stag on the bottom right to fade in on page load. So, When you go to "Developments" section, you will see there are no images shown. It's my problem. When I don't use fadeIn function so that all elements show at once on page load, it works fine, but once I make accordion display:none in the stylesheet and then show it using fadeIn, the issue appears.
What can I do about this?
If the carousel is hidden during initialization, jCarousel has problems to do required calculations. The solution is to initialize jCarousel once the container is displayed.
Something like this:
$('container_selector').fadeIn(function() {
var c = $('carousel_selector');
if (!c.data('jcarousel')) {
c.jcarousel({ ... options .. });
}
});