Carousel loading failed - javascript

I'm trying to call bootstrap carousel slider from a separate html file but it doesn't work. Only the first image appears and other images don't slide. The carousel slider is in a file called home.html:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/insole_01.jpg" alt="Chania">
</div>
<div class="item">
<img src="images/insole_02.jpg" alt="Chania">
</div>
<div class="item">
<img src="images/insole_03.jpg" alt="Flower">
</div>
<div class="item">
<img src="images/insole_04.jpg" alt="Flower">
</div>
</div>
</div>
I'm calling it in my index.html file with a div tag:
<div class="products"></div>
And this is the Javascript code for the carousel:
$('.carousel').carousel({
interval: 3500
});
$(document).ready(function() {
$('div.products').load('products/home.html');
$('.dropdown-menu>li').find('a').on('click', function(e){
var links = $(this).attr('href');
$('div.products').load(links).hide().fadeIn('300');
e.preventDefault();
});
});
Any help please!


Since you are using the jQuery load() you should use the Callback Function, run your code only after the html loaded.
(also make sure your path are correct)
Read more here: http://api.jquery.com/load/
$(document).ready(function() {
$("div.products").load("products/home.html", function() {
$('.carousel').carousel({
interval: 500
});
$('div.products').load('products/home.html');
$('.dropdown-menu>li').find('a').on('click', function(e) {
var links = $(this).attr('href');
$('div.products').load(links).hide().fadeIn('300');
e.preventDefault();
});
});
});
$(document).ready(function() {
$("div.products").load("products/home.html", function() {
$('.carousel').carousel({
interval: 500
});
$('div.products').load('products/home.html');
$('.dropdown-menu>li').find('a').on('click', function(e) {
var links = $(this).attr('href');
$('div.products').load(links).hide().fadeIn('300');
e.preventDefault();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/insole_01.jpg" alt="Chania">
</div>
<div class="item">
<img src="images/insole_02.jpg" alt="Chania">
</div>
<div class="item">
<img src="images/insole_03.jpg" alt="Flower">
</div>
<div class="item">
<img src="images/insole_04.jpg" alt="Flower">
</div>
</div>
</div>
<div class="products">
</div>

Related

Bootstrap carousel not working (Its not sliding)

<link href="~/assets/css/bootstrap.min.css" rel="stylesheet" />
<div id="myCar" class="carousel slide" data-ride="carousel" style="height: 100%;" >
<!-- Wrapper for slides -->
<div id="myNewCar" class="carousel-inner" style="height: 100%; ">
<div class="item active">
<img src="~/assets/images/full-screen-image-3.jpg" class="img-responsive" />
</div>
<div class="item">
<img src="~/assets/images/sidebar-1.jpg" class="img-responsive" />
</div>
<div class="item">
<img src="~/assets/images/sidebar-5.jpg" class="img-responsive" />
</div>
</div>
</div>
<script src="~/assets/js/core/jquery.3.2.1.min.js"></script>
<script src="~/assets/js/core/bootstrap.min.js"></script>
I am using bootstrap carousel in my asp.net mvc partial view but the images in the slider are not sliding it only displays the first image

Bootstrap 4 changed .item to .carousel-item. Update your HTML to reflect migration from BS3 to BS4 and your carousel will work as expected. So change:
<div class="item active">
<img src="~/assets/images/full-screen-image-3.jpg" class="img-responsive" />
</div>
to:
<div class="carousel-item active">
<img src="~/assets/images/full-screen-image-3.jpg" class="img-responsive" />
</div>
And repeat for each iteration of your slides. For additional information on Bootstrap 4s Carousel component reference the documentation for the current version (4.0.0-beta2):
https://getbootstrap.com/docs/4.0/components/carousel/

Bootstrap carousel went chaos

I have a problem with basic bootstrap carousel. I just want slides to move every four seconds, for example. Carousel looks like this:
$(document).ready(function() {
fixCarousel();
});
function fixCarousel() {
$('.carousel').carousel({
interval: 1000*4
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://via.placeholder.com/750x150" alt="Image">
<div class="carousel-caption car_slide">
<h3 class="slide_text">Suppliers of skilled Workforce</h3>
<a class="page-scroll" href="#services">
<button class="learn_more_button btn btn-primary">
LEARN MORE
</button>
</a>
</div>
</div>
<div class="item">
<img src="http://via.placeholder.com/750x150" alt="Image">
<div class="carousel-caption car_slide">
<h3>SMART, EFFECTIVE ENTERPRISE SOLUTIONS</h3>
<a class="page-scroll" href="#services">
<button class="learn_more_button btn btn-primary">
LEARN MORE
</button>
</a>
</div>
</div>
</div>
</div>
But strange things are happening. It works one time, another it waits like 10 sec, then few seconds, then, it goes normally, then, it stops cycling at all...
Any solutions? Thanks.

Here you go with the solution https://jsfiddle.net/zj6bj6cj/
$(document).ready(function() {
$('.carousel').carousel({
interval: 1000*4
});
});
img {
height: 300px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://via.placeholder.com/350x15" alt="Image">
<div class="carousel-caption car_slide">
<h3 class="slide_text">Suppliers of skilled Workforce</h3>
<a class="page-scroll" href="#services">
<button class="learn_more_button btn btn-primary">
LEARN MORE
</button>
</a>
</div>
</div>
<div class="item">
<img src="http://via.placeholder.com/350x15" alt="Image">
<div class="carousel-caption car_slide">
<h3>SMART, EFFECTIVE ENTERPRISE SOLUTIONS</h3>
<a class="page-scroll" href="#services">
<button class="learn_more_button btn btn-primary">
LEARN MORE
</button>
</a>
</div>
</div>
</div>
</div>

Thumbnail with active class in javascript

First of all I don't know nothing about javascript.
I have this slider:
<div class="col-md-12" id="slider">
<!-- Top part of the slider -->
<div id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active" data-slide-number="0">
<img src="img/one.png"></div>
<div class="item" data-slide-number="1">
<img src="img/two.png"></div>
<div class="item" data-slide-number="2">
<img src="img/three.png"></div>
<div class="item" data-slide-number="3">
<img src="img/four.png"></div>
</div><!-- Carousel nav -->
</div>
</div>
</div><!--/Slider-->
<div class="col-md-12" id="slider-thumbs">
<!-- Bottom switcher of slider -->
<div class="carousel slide" id="indicador">
<div class="carousel-inner">
<div class="item active">
<div class="col-md-2 miniaturas">
<a class="thumbnail" id="carousel-selector-0"><img src="img/one.png"></a>
</div>
<div class="col-md-2 miniaturas">
<a class="thumbnail" id="carousel-selector-1"><img src="img/two.png"></a>
</div>
</div>
<div class="item">
<div class="col-md-2 miniaturas">
<a class="thumbnail" id="carousel-selector-0"><img src="img/three.png"></a>
</div>
<div class="col-md-2 miniaturas">
<a class="thumbnail" id="carousel-selector-1"><img src="img/four.png"></a>
</div>
</div>
</div>
</div>
</div>
And with this javascript, they works:
$('[id^=carousel-selector-]').click(function () {
var id_selector = $(this).attr("id");
try {
var id = /-(\d+)$/.exec(id_selector)[1];
console.log(id_selector, id);
jQuery('#myCarousel').carousel(parseInt(id));
} catch (e) {
console.log('Regex failed!', e);
}
});
But I would like to make the thumbnail with an active class, how can I made this with javascript // jquery?
Thanks a lot to help me!

Get all of the thumbnail images with $('.thumbnail img');, then when you click on one of the #carousel-selector-* elements, remove the .active class from all other thumbnails and add it to the one inside of the link you clicked on.
var $imgs = $('.thumbnail img');
$('[id^=carousel-selector-]').click(function() {
var id_selector = $(this).attr("id"),
$img = $(this).find('img');
$imgs.not($img).removeClass('active');
$img.addClass('active');
try {
var id = /-(\d+)$/.exec(id_selector)[1];
console.log(id_selector, id);
jQuery('#myCarousel').carousel(parseInt(id));
} catch (e) {
console.log('Regex failed!', e);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12" id="slider">
<!-- Top part of the slider -->
<div id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active" data-slide-number="0">
<img src="img/one.png"></div>
<div class="item" data-slide-number="1">
<img src="img/two.png"></div>
<div class="item" data-slide-number="2">
<img src="img/three.png"></div>
<div class="item" data-slide-number="3">
<img src="img/four.png"></div>
</div>
<!-- Carousel nav -->
</div>
</div>
</div>
<!--/Slider-->
<div class="col-md-12" id="slider-thumbs">
<!-- Bottom switcher of slider -->
<div class="carousel slide" id="indicador">
<div class="carousel-inner">
<div class="item active">
<div class="col-md-2 miniaturas">
<a class="thumbnail" id="carousel-selector-0"><img src="img/one.png"></a>
</div>
<div class="col-md-2 miniaturas">
<a class="thumbnail" id="carousel-selector-1"><img src="img/two.png"></a>
</div>
</div>
<div class="item">
<div class="col-md-2 miniaturas">
<a class="thumbnail" id="carousel-selector-0"><img src="img/three.png"></a>
</div>
<div class="col-md-2 miniaturas">
<a class="thumbnail" id="carousel-selector-1"><img src="img/four.png"></a>
</div>
</div>
</div>
</div>
</div>

How Can I create simultaneous carousels

i.e. two carousels in the same location but one is always hidden, with two buttons (anchors?) above to turn either one on:
<div class="row">
<div class="col-lg-12">
<div class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div id="floorsCarousel" class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://lorempixel.com/1400/600/sports/1/" alt="Chania">
</div>
<div class="item">
<img src="http://lorempixel.com/1400/600/sports/2/" alt="Chania">
</div>
<div class="item">
<img src="http://lorempixel.com/1400/600/sports/3/" alt="Flower">
</div>
<div class="item">
<img src="http://lorempixel.com/1400/600/sports/4/" alt="Flower">
</div>
</div>
</div>
My JS does not appear to be working, this is what I have in my JS file:
var floorsCarousel = document.getElementById("floorsCarousel");
var spaceCarousel = document.getElementById("spaceCarousel");
function floorPlans() {
if (floorsCarousel.style.display==="none") {
floorsCarousel.style.display="inherit";
}
if (spaceCarousel.style.display!=="none") {
spaceCarousel.style.display="none";
}
return false;
}
function spacePlans() {
if (spaceCarousel.style.display==="none") {
spaceCarousel.style.display="inherit";
}
if (floorsCarousel.style.display!=="none") {
floorsCarousel.style.display="none";
}
return false;
}
JSFiddle

I have created a solution for you that does what you need here. I've created "buttons" to toggle which carousel you wish to open and wrapped the carousel's in a div with the attr's id="Car-#" class="Car-toggle"
Html
<div class="row">
<button class="toggleCar" data-for="Car-1">Toggle 1</button>
<button class="toggleCar" data-for="Car-2">Toggle 2</button>
<div class="col-lg-12">
<div id="Car-1" class="Car-toggle">carousel One
<div class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div id="floorsCarousel" class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://lorempixel.com/1400/600/sports/1/" alt="Chania">
</div>
<div class="item">
<img src="http://lorempixel.com/1400/600/sports/2/" alt="Chania">
</div>
<div class="item">
<img src="http://lorempixel.com/1400/600/sports/3/" alt="Flower">
</div>
<div class="item">
<img src="http://lorempixel.com/1400/600/sports/4/" alt="Flower">
</div>
</div>
</div>
</div>
<div id="Car-2" class="Car-toggle">carousel Two
<div class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div id="floorsCarousel" class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://lorempixel.com/1400/600/sports/1/" alt="Chania">
</div>
<div class="item">
<img src="http://lorempixel.com/1400/600/sports/2/" alt="Chania">
</div>
<div class="item">
<img src="http://lorempixel.com/1400/600/sports/3/" alt="Flower">
</div>
<div class="item">
<img src="http://lorempixel.com/1400/600/sports/4/" alt="Flower">
</div>
</div>
</div>
</div>
</div>
</div>
Javascript (JQuery since your using bootstrap)
$('.toggleCar').click(function(){
var CarWrapperName=$(this).attr('data-for');
$('.Car-toggle').hide();
$('#'+CarWrapperName).show();
});
//Hide All Toggles and Show Default
$('.Car-toggle').hide();
$('#Car-1').show();

Why is my JQuery function not being called inside bootstrap html template

I have just recently started developing websites and facing some issues. I am trying to include a jquery plugin into my html which is a thumbnail carousel bar. My issue is that the jq function is not being called. I tried using other plugins but facing the same issue.
Here is my code. thanks
<!DOCTYPE html>
<html>
<head>
<script src="/media/js/jquery-ui.min.js"></script>
<script src="/media/js/css3-mediaqueries.js"></script>
<script src="/media/js/fwslider.js"></script>
<script type="text/javascript" src="/media/js/jquery1.min.js"></script>
<script type="text/javascript"> // this junction is working
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1200);
});
});
</script>
<script src="/media/js/jquery.easydropdown.js"></script> // this junction is working
<script type="text/javascript" src="/media/js/jquery.mixitup.min.js"></script>
<script type="text/javascript">
$(function () {
hoverEffect: function () {
// code on animation which is working
}
});
</script>
</head>
<body>
<!-- header-section-starts -->
<div class="header">
<div class="top-header" ><!--to work on style="position:fixed; width:100%; top: 0px; z- index:0;"-->
<div class="container">
<!-- navbar code -->
<script><!--script-nav-->
$("span.menu").click(function(){
$(".top-menu ul").slideToggle("slow" , function(){
});
});
</script>
</div>
</div>
<div id="fwslider">
<div class="slider_container">
<div class="slide">
<img src="/media/images/banner.jpg" class="img-responsive" alt=""/>
</div>
<div class="slide" id="Home">
<img src="/media/images/banner1.jpg" class="img-responsive" alt=""/>
</div>
</div>
<div class="timers"></div>
<div class="slidePrev"><span></span></div>
<div class="slideNext"><span></span></div>
</div>
</div>
<!-- header-section-ends -->
<!-- content-section-starts -->
<div class="content">
<div class="container">
<div class="about-section-left-grid">
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<img src="/media/images/tiger1.jpg" class="img-responsive" alt="" />
</li>
<li>
<img src="/media/images/pic2.jpg" class="img-responsive" alt="" />
</li>
</ul>
</div>
</section>
<script defer src="/media/js/jquery.flexslider.js"></script>
<script type="text/javascript"><!-- this works -->
$(function(){
SyntaxHighlighter.all();
});
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>
</div>
</div>
<!-- here my div block for thumbnail starts------------------------------------------------ -->
<div class="container-fluid" style="padding:0;">
<div id="custom_carousel" class="carousel slide" data-ride="carousel" data-interval="2500">
<!-- Wrapper for slides -->
<div class="controls">
<ul class="nav">
<li data-target="#custom_carousel" data-slide-to="0" class="active"><small>INDIVIDUAL LESSONS</small></li>
<li data-target="#custom_carousel" data-slide-to="1"><small>PLAYER DEVELOPMENT PROGRAM</small></li>
</ul>
</div>
<script><!--This fuction is not being called. its taken from a jq plugin for thumbnail carousel -->
$(document).ready(function(){
$('#custom_carousel').on('slide.bs.carousel', function (evt) {
$('#custom_carousel .controls li.active').removeClass('active');
$('#custom_carousel .controls li:eq('+$(evt.relatedTarget).index()+')').addClass('active');
})
});
</script>
<div class="carousel-inner">
<div class="item active">
<div class="container-fluid" style="background-color:#282B30;">
<div class="row" >
<div class="col-md-12">
<article style="position: relative; width: 100%; opacity: 1;">
<div class="col-md-4 clients-image">
<img src="/media/images/beauty.jpg" class="img-responsive" alt="" />
</div>
<div class="col-md-8 clients-text">
<p>claritatem</p>
</div>
</article>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container-fluid" style="background-color:#282B30;">
<div class="row" >
<div class="col-md-12">
<article style="position: relative; width: 100%; opacity: 1;">
<div class="col-md-4 clients-image">
<img src="/media/images/beauty.jpg" class="img-responsive" alt="" />
</div>
<div class="col-md-8 clients-text">
<p>claritatem</p>
</div>
</article>
</div>
</div>
</div>
</div>
</div>
</div><!-- End Carousel Inner -->
</div><!-- End Carousel -->
</div><!-- End content -->
</body>
</html>

Categories