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');
}
Related
'The generator works and displays over the first image but I lose it on the second and third then it appears again with a different quote over the first slide again the way it should and I'm lost as to why' I've tried numerous things to figure this out and know it's probably very simple. I looked at ajax and jquery but still couldn't find the answer.
//Begin the Random Quote function of 'generateQuote'
document.addEventListener("DOMContentLoaded", function(){
var myCarousel = document.getElementById("myCarousel");
myCarousel.addEventListener("slide.bs.carousel", function(){
generateQuote();
document.getElementById("generate").innerHTML = 'myCarousel';
});
});
const generateQuote = function() {
const quotes = [
{
quote: "Do not pity the dead, Harry. Pity the living, and, above all those who live without love.",
author: "Albus Dumbledore"
},
{
quote: "It is impossible to manufacture or imitate love",
author: "Horace Slughorn"
},
{
quote: "Being different isn't a bad thing. It means that you are brave enough to be yourself.",
author: "Luna Lovegood"
},
{
quote: "If you want to know what a man’s like, take a good look at how he treats his inferiors, not his equals.",
author: "Sirius Black"
},
{
quote: "Never trust anything that can think for itself if you can’t see where it keeps its brain.",
author: "Arthur Weasley"
},
{
quote: "Every human life is worth the same, and worth saving.",
author: "Kingsley Shacklebolt"
},
{
quote: "Have a biscuit, Potter.",
author: "Minerva McGonagall"
},
{
quote: "Happiness can be found even in the darkest of times, if one only remembers to turn on the light.",
author: "Albus Dumbledore"
},
{
quote: "Socks are Dobby’s favorite, favorite clothes, sir!",
author: "Dobby"
}
];
let arrayIndex = Math.floor(Math.random() * quotes.length);
document.getElementById("quotes").innerHTML = quotes[arrayIndex].quote;
document.getElementById("author").innerHTML = quotes[arrayIndex].author;
}
'The myBox and text class align the quotes in the upper right of the image and it works like it' 'should but just on the first image then I get nothing until it cycles thru again. Thanks.'
<!-- The Start of the main Carousel-->
<div class="container-lg my-3">
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
</ol>
<!-- Wrapper for carousel items -->
<div class="carousel-inner">
<div class="carousel-item active">
<!--The Quotes for the first image-->
<div class="mybox">
<img id="generate" src="images/mockup1.jpg" class="d-block w-100" alt="Slide 1">
<div class="text">
<p id="quotes"></p>
<p id="author"></p>
</div></div>
<!-- End of the first image Quotes-->
</div>
<div class="carousel-item">
<!--The Quotes for the second image-->
<div class="mybox">
<img id="generate" src="images/mockup2.jpg" class="d-block w-100" alt="Slide 2">
<div class="text">
<p id="quotes"></p>
<p id="author"></p>
</div></div>
<!-- End of Second image-->
</div>
<div class="carousel-item">
<!--The Quotes for the Third image-->
<div class="mybox">
<img id="generate3" src="images/mockup3.jpg" class="d-block w-100" alt="Slide 3">
<div class="text">
<p id="quotes"></p>
<p id="author"></p>
</div></div>
<!-- End of Third image-->
</div>
</div>
<!-- Carousel controls -->
<a class="carousel-control-prev" href="#myCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#myCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
There appears to be an issue in the following line:
myCarousel.addEventListener("slide.bs.carousel", function(){
You have passed a CSS selector slide.bs.carousel as the first argument to addEventListener. This should be the event it's listening for, e.g., click.
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
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
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.
I have a bootstrap carousel with a progress bar that fill up and triggers the next slide. My problem is that right now the carousel pauses when i hover the mouse over the slides and i want it to not pause and keep going.
Here is my code:
$(document).ready(function(){
var percent = 0,
interval =35//it takes about 6s, interval=20 takes about 4s
$bar = $('#progress-bar'),
$crsl = $('#carousel-hero');
$('.carousel-indicators li, .carousel-control').click(function (){$bar.css({width:0.5+'%'});});
/*line above just for showing when controls are clicked the bar goes to 0.5% to make more friendly,
if you want when clicked set bar empty, change on width:0.5 to width:0*/
$crsl.carousel({//initialize
interval: false,
pause: false
}).on('slide.bs.carousel', function (){percent = 0;});//This event fires immediately when the bootstrap slide instance method is invoked.
function progressBarCarousel() {
$bar.css({width:percent+'%'});
percent = percent +0.5;
if (percent>=100) {
percent=0;
$crsl.carousel('next');
}
}
var barInterval = setInterval(progressBarCarousel, interval);//set interval to progressBarCarousel function
if (!(/Mobi/.test(navigator.userAgent))) {//tests if it isn't mobile
$crsl.hover(function(){
clearInterval(barInterval);
},
function(){
barInterval = setInterval(progressBarCarousel, interval);
}
);
}
});
And my HTML :
<div id="carousel-hero" class="carousel slide" data-ride="carousel"><!-- Main Slider -->
<ol class="carousel-indicators">
<li data-target="#carousel-hero" data-slide-to="0" class="active"></li>
<li data-target="#carousel-hero" data-slide-to="1"></li>
<li data-target="#carousel-hero" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active"><!-- First Slide -->
<div class="overlay"></div>
<img src="images/hero1.jpg" alt="hero-image" class="img-responsive">
<div class="carousel-caption"><!-- Tagline -->
<h1 class="tagline">WE ARE <span class="colored">NIXO</span> CREATIVE</h1>
<h5>Branding | Design | Developement</h5>
</div>
</div>
<div class="item"><!-- Second Slide -->
<div class="overlay"></div>
<img src="images/hero2.jpg" alt="hero-image" class="img-responsive">
<div class="carousel-caption"><!-- Tagline -->
<h1 class="tagline">WE <span class="colored">ALWAYS</span> DELIVER</h1>
<h5>UX | Marketing | Ideas</h5>
</div>
</div>
<div class="item"><!-- Third Slide -->
<div class="overlay"></div>
<img src="images/hero3.jpg" alt="hero-image" class="img-responsive">
<div class="carousel-caption"><!-- Tagline -->
<h1 class="tagline">WE <span class="colored">LOVE</span> DESIGN</h1>
<h5>Beautiful | Clean | Inspiring</h5>
</div>
</div>
<!-- Carousel Controlls -->
<a id="hero-control-left" class="control-hero control-left" href="#carousel-hero" role="button" data-slide="prev">
<span class="pe-7s-angle-left pe-4x" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a id="hero-control-right" class="control-hero control-right" href="#carousel-hero" role="button" data-slide="next">
<span class="pe-7s-angle-right pe-4x" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div id="progress-bar"></div> <!-- Carousel Progress Bar -->
</div>
THINGS I'VE TRIED:
in the js file setting pause: 'none'
adding data-pause="false" to the carousel
having puase: false and data-pause="false" at the same time
Any help is apreciated.
Set Pause to null and data-pause="false"
$crsl.carousel({//initialize
interval: false,
pause: null
})
<div id="carousel-hero" class="carousel slide" data-ride="carousel" data-pause="null">
Read more about the carousel options here
https://v4-alpha.getbootstrap.com/components/carousel/#options
For avoiding the progress bar stop remove the code for crsl.hover which clears interval for the progress bar and restart it on blur.
Working Example : https://jsfiddle.net/ne9x9Lp1/
I had the same problem. Just solved it by changing the bootstrap js file (in my case bootstrap.bundle.min.js)
ctrl+f=pause to make it easy to find, it was pause:"hover" and I change it for:
pause:"false"
hope this helps.