Develop Reference

Carousel slider does not work after bootstrap 4 update with

I am trying to upgrade the bootstrap from 3.3.4 to 4.1.3. To do that I have just replaced the contents of the bootstrap.js with the 4.1.3. I was hoping that this would be it, however, after doing this the slider does not work. Carousel comes up but the images do not slide and the controls also do not work.
I understand that a similar question has already been answered, but trust me they have not worked for me. It's been 3 days since I have been struggling with this, so putting out here in case someone can point me in the right direction.
jquery-v3.3.1.html
<script src='<%=Server.getApplURL()%>/../common/JS/jquery/v-3.3.1/jquery-3.3.1.min.js'></script>
Now this file is included in the header file
header.jsp
<%#include file="/../jshtml/jquery-v3.3.1.html"%>
<script src="<%=ServerSupportUtil.getApplURL() %>/kay/js/vendor/modernizr-2.8.3.min.js"></script>
<script src="<%=ServerSupportUtil.getApplURL() %>/kay/js/jquery.min.min.js"></script>
<script src="<%=ServerSupportUtil.getApplURL() %>/kay/js/popper.min.js"></script>
<script src="<%=ServerSupportUtil.getApplURL() %>/kay/js/bootstrap.js"></script>
<script src="<%=ServerSupportUtil.getApplURL() %>/kay/js/plugins.js"></script>
<!-- Scripts that run onLoad -->
<script>
$('.carousel').carousel({});
</script>
Now, this header file is included in the main jsp page which has the code for the carousel. I think this is enough for making sure bootstrap.js, popper.js, and jquery.js are available to the code.
I have changed few things and right now both the slides are same. This code as it is also does not work.
Question:
This carousel does not work and I do not see any errors also anywhere in Chrome dev tools. Any suggestion on how I can see the real error?
home.jsp
<%# include file="../common/header.jsp"%>
<div id="carousel-main" class="carousel slide" data-ride="carousel" data-interval="5000" data-pause="hover">
<!-- Indicators -->
<ul class="carousel-indicators">
<%
while(itr.hasNext())
{
com.SliderDetailsBn sliderbn = (com.SliderDetailsBn)itr.next();
if(sliderCounter == 0)
{
%>
<li data-target="#carousel-main" data-slide-to="<%=sliderCounter %>" class="active"></li>
<%
}
else
{
%>
<li data-target="#carousel-main" data-slide-to="<%=sliderCounter %>"></li>
<%
}
sliderCounter++;
}
%>
</ul>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<%
sliderCounter = 0;
itr = SliderDtlsList.iterator();
while(itr.hasNext())
{
com.SliderDetailsBn sliderbn = (com.SliderDetailsBn)itr.next();
String imagepath = sliderbn.getFilePath();
String sliderUrl = sliderbn.PathUrl();
String sliderType = sliderbn.getFileType();
DelimitedString altText = new DelimitedString( sliderbn.getAltText());
String actualAltText = altText.getString(1);
String headerAltText = altText.getString(2);
if(sliderCounter == 0)
{
if("Link".equalsIgnoreCase(sliderType))
{
%>
<div class="item" onclick="openWindow(this)" onKeyPress="openWindow(this)"
data-href="<%=sliderUrl%>" data-interaction="true" tabindex="0"
aria-label="<%=actualAltText%>">
<div class="carousel-image"
style="background-image: url('<%=imagepath%>')">
<div class="carousel-caption">
<h3><%=headerAltText%></h3>
<p><%=actualAltText%></p>
</div>
</div>
</div>
<div class="item" onclick="openWindow(this)" onKeyPress="openWindow(this)"
data-href="<%=sliderUrl%>" data-interaction="true" tabindex="0"
aria-label="<%=actualAltText%>">
<div class="carousel-image"
style="background-image: url('<%=imagepath%>')">
<div class="carousel-caption">
<h3><%=headerAltText%></h3>
<p><%=actualAltText%></p>
</div>
</div>
<%
}
}
sliderCounter++;
}
%>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-main"
role="button" data-slide="prev"> <span
class="fa-chevron-left" aria-hidden="true"></span> <span
class="sr-only">Previous</span>
</a> <a class="right carousel-control" href="#carousel-main"
role="button" data-slide="next"> <span
class="fa-chevron-right" aria-hidden="true"></span> <span
class="sr-only">Next</span>
</a>
</div>
</div>
<!-- END: Slider container -->
</div>
</div>
<%
}
%>
<!-- END: slider -->

If you have updated to BS4 from BS3 then you need to change the classes for slides in your code from item to carousel-item as in BS4 they have made few changes.
So you can simply do this to all your slide divs
<div class="carousel-item" onclick="openWindow(this)" onKeyPress="openWindow(this)"
data-href="<%=sliderUrl%>" data-interaction="true" tabindex="0"
aria-label="<%=actualAltText%>">
and make sure to add active class also to first slide in the carousel code.
Hope it helps

Remove carousel arrows if the image is not loaded

I am currently trying to remove the arrows from the carousel when there is no image present. The reason for me trying to do so, is simply because I am trying to load several images into a carousel from a database into a given section. This section is recreated multiple times and it doesn't always contain images.
The issue that I am having is that, whenever the bootstrap carousel doesn't have any images loaded, it just displays the carousel arrows on the side. This gives a bad look to the current section and I would like to dispose of that.
How can I remove the carousel arrows when there aren't any images
loaded in the carousel?
Here is a JsFiddle which contains what I've done so far, it is heavy inspired by several other posts. This only removes the left arrow on the first slide and the right arrow on the last slide.
Here you can preview how does the carousel look whenever there are absent images. I have set a black background of 400px in order for the arrows to be more easily spotted. Absent Images JsFiddle
Here is the code I have so far:
<div class="container">
<div id="main_area">
<!-- Slider -->
<div class="row">
<div class="col-xs-12" id="slider">
<!-- Top part of the slider -->
<div class="row">
<div class="col-sm-8" id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="http://placehold.it/770x300&text=one"></div>
<div class="item" data-slide-number="1">
<img src="http://placehold.it/770x300&text=two"></div>
<div class="item" data-slide-number="2">
<img src="http://placehold.it/770x300&text=three"></div>
<div class="item" data-slide-number="3">
<img src="http://placehold.it/770x300&text=four"></div>
<div class="item" data-slide-number="4">
<img src="http://placehold.it/770x300&text=five"></div>
<div class="item" data-slide-number="5">
<img src="http://placehold.it/770x300&text=six"></div>
</div><!-- Carousel nav -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next" id="arrow-right">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div><!--/Slider-->
</div>
JQuery Code:
jQuery(document).ready(function($) {
$('.carousel').carousel({
interval: false,
})
$(document).ready(function () { // on document ready
checkitem();
});
$('#myCarousel').on('slid.bs.carousel', checkitem);
function checkitem() // check function
{
var $this = $('#myCarousel');
if ($('.carousel-inner .item:first').hasClass('active')) {
$this.children('.left.carousel-control').hide();
} else if ($('.carousel-inner .item:last').hasClass('active')) {
$this.children('.right.carousel-control').hide();
} else {
$this.children('.carousel-control').show();
}
}
$("img").error(function(){
$(this).hide('#arrow-right');
});
});
Here are the answers that I've already checked for solutions:
Link 1Link 2
Thank you in advance.

Using jQuery you could try something like..
$(document).ready(function(){
if($('.carousel-inner .item img').attr('src') == '') {
$('.carousel-control').css('display', 'none');
}
});
fiddle

Vuejs 2 image slider

I have used flexslider in angularjs before. I am working on a laravel 5.3 project with vue.js 2. I have found a way to create a slider like in this jsfiddle but what I want is to have arrows on the images like how flexslider does it.
new Vue({
el: 'image-slider',
data: {
images: ['http://i.imgur.com/vYdoAKu.jpg', 'http://i.imgur.com/PUD9HQL.jpg', 'http://i.imgur.com/Lfv18Sb.jpg', 'http://i.imgur.com/tmVJtna.jpg', 'http://i.imgur.com/ZfFAkWZ.jpg'],
currentNumber: 0,
timer: null
},
ready: function () {
this.startRotation();
},
methods: {
startRotation: function() {
this.timer = setInterval(this.next, 3000);
},
stopRotation: function() {
clearTimeout(this.timer);
this.timer = null;
},
next: function() {
this.currentNumber += 1
},
prev: function() {
this.currentNumber -= 1
}
}
});
Is there a package that does this or is there a way to modify the code to allow for that?

At first I used the Zurb Foundation orbit but I encountered issues when passing multiple images from the database. So I ended up using slick carousel
I used npm to install then used require(webpack) like this:
slick = require('slick-carousel');
Then initialised it like this:
updated: function () {
$('.gallery').slick({
autoplay: true,
dots: false,
arrows: true,
responsive: [{
breakpoint: 500,
settings: {
dots: false,
arrows: true,
infinite: true,
slidesToShow: 1
}
}]
});
Then I had to add the scss files when compiling my SASS files like this:
mix.sass([
'app.scss',
'../../../node_modules/slick-carousel/slick/slick.scss',
'../../../node_modules/slick-carousel/slick/slick-theme.scss']);
And then just render the images using a v-for loop:
<section class='gallery' v-if="images">
<div v-for="img in images">
<img :src="img" class="image">
</div>
</section>

I am currently using carousel provided by bootstrap which is working fine for me.
You can see a demo of bootstrap carousel here and here with vue and vue-router.
I have also tried jssor slider which was also quite easy to use and had option of not using jquery as well.
Code with bootstrap
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img src="https://www.hallaminternet.com/assets/URL-tagging-image.png" alt="First slide">
</div>
<div class="carousel-item">
<img src="http://www.shawacademy.com/blog/wp-content/uploads/2015/10/URL-1000x605.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img src="https://devcereal.com/wp-content/uploads/2016/05/URL-URI-URN-whats-difference.png" alt="Third slide">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Zurb foundation also provides an image slider, which it calls orbit, documentation can be accessed here.

Each time window resizes, the append method keeps adding to container

I'm trying to switch out my images in Bootstrap's carousel at the 768px breakpoint only for responsive purposes. So I decided to use the resize() method and append the smaller images to the .carousel-inner div when they reach equal to or less than to 768px or maintain large images if window is larger than 768. However, when ever I resize the window it keeps appending those images over and over again until I stop resizing. Only returns to normal when I refresh. Which this all makes sense that it the code executes every time the window gets resized. So I was wondering if there is a method out there that I should be trying instead? I kind want it to act like a media query... I have pasted my code below and you can check it out on my GitHub: https://ldgoncalves.github.io/ChamberStat/html/index.html
I'm using Laravel 5.3 for this as well.
$(window).on("resize load", function () {
if ($(window).width() <= 768) {
var smallerImg = '<div class="item active"><img src="{{asset('images/slide4.png')}}" alt="First slide of a customer review"></div>' +
'<div class="item"><img src="{{asset('images/slide5.png')}}" alt="Second slide of a customer review"></div>' +
'<div class="item"><img src="{{asset('images/slide6.png')}}" alt="Third slide of a customer review"></div>'+
'<div class="item"><img src="{{asset('images/slide7.png')}}" alt="Fourth slide of a customer review"></div>'+
'<div class="item"><img src="{{asset('images/slide8.png')}}" alt="Fifth slide of a customer review"></div>'+
'<div class="item"><img src="{{asset('images/slide9.png')}}" alt="Sixth slide of a customer review"></div>';
$('.carousel-inner').append(smallerImg);
}
else{
var largerImg = '<div class="item active"><img src="{{asset('images/slide1.png')}}" alt="First slide of customer reviews"></div>' +
'<div class="item"><img src="{{asset('images/slide2.png')}}" alt="Second slide of customer reviews"></div>' +
'<div class="item"><img src="{{asset('images/slide3.png')}}" alt="Third slide of customer reviews"></div>';
$('.carousel-inner').append(largerImg);
}
});
<!-- Testimonials -->
<section id="testimonials" class="row">
<h1 class="col-xs-12 col-md-12">Testimonials</h1>
<p class="col-xs-12 col-md-12">ChamberStat will get you organized, but don't take our word for it! See what
our customers are saying.</p>
<!-- bootstrap carousel -->
<div class="clearfix hidden-sm-up"></div>
<div id="testimonials-slide" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators col-lg-1">
<li data-target="#testimonials-slide" data-slide-to="0" class="active"></li>
<li data-target="#testimonials-slide" data-slide-to="1"></li>
<li data-target="#testimonials-slide" data-slide-to="2"></li>
<li data-target="#testimonials-slide" data-slide-to="3"></li>
<li data-target="#testimonials-slide" data-slide-to="4"></li>
<li data-target="#testimonials-slide" data-slide-to="5"></li>
</ol>
<div class="carousel-inner" role="listbox">
</div>
<a class="left carousel-control" href="#testimonials-slide" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#testimonials-slide" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>

You only want the content change to happen when the mode changes. And you probably want to empty() the list when changing content. Something like this:
$(window).on("resize load", function () {
var largerImg = '...';
var smallerImg = '...';
var $carousel = $('.carousel-inner');
var lastMode = $carousel.hasClass('small') ? 'small' : 'large';
var newMode = $(window).width() <= 768 ? 'small' : 'large';
if (lastMode === newMode)
return;
if (newMode === 'small') {
$carousel.addClass('small').empty().append(smallerImg);
} else{
$carousel.removeClass('small').empty().append(largerImg);
}
});

Quick idea: You could store the last window size in a var. An only change the images, if oldSize > breakpoint && newValue <= breakpoint. And vice versa for the other "mediaQuery".

RAILS/HTML: Change image slide every 7 seconds

I've seen a lot of questions like mine here in stack just like these three: 1, 2 and 3. But I tried their way but it didn't work.
I am looking for a more simple way.
Using Javascript in-line in html, I tried to have this code (which I found in one of those questions here in stack)
<script>
function FetchData() {
$("#pack").animate({
left: '-1000px'
}, 'slow');
}
setTimeout(FetchData, 7000); </script>
and have this as well...
<img id="pack" src="image.jpg">
but it seems to not work. Nothing happened. I have looked and stared at the photo for over a minute and it did not move at all. What was wrong? Do I lack some codes? I have no css code that relates to this by the way.

Try to use carousel using bootstrap and put this on the topmost part of your code:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
This is the code for the slides in html:
<div class="carousel slide" id="myCarousel" data-ride="carousel">
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#myCarousel">
</li>
<li data-slide-to="1" data-target="#myCarousel">
</li>
<li data-slide-to="2" data-target="#myCarousel">
</li>
</ol>
<div class="carousel-inner">
<div class="item active">
<%= image_tag 'image_1.jpg' %>
</div>
<div class="item">
<%= image_tag 'image_2.jpg' %>
</div>
<div class="item">
<%= image_tag 'image_3.jpg' %>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
and this is the javascript in-line code:
<script type="text/javascript">
$(document).ready(function(){
$("#myCarousel").carousel({
interval : 7000,
pause: false
});
});
</script>

When your teacher says "separate js and html", and that you shouldn't use inline javascript, they probably mean that you should have something like this setup:
in your layout, include a javascript file (this might be included by default). It's best to put these down the bottom. If there's a default layout it might have a place for javascript includes already.
<%= javascript_include_tag "application" %>
in your view
<img id="pack" src="image.jpg">
in application.js
$(function() {
//run on dom ready
console.log("about to setTimeout");
setTimeout(FetchData, 7000);
console.log("done setTimeout");
});
function FetchData() {
console.log("in FetchData, about to animate, $('#pack').size() = "+$('#pack').size());
$("#pack").animate({
left: '-1000px'
}, 'slow');
}