I have a carousel button that scrolls back and forward through images.
The issue I have is that the href of the carousel is "#phonedemo" as this is where the images are stored. The scroll also moves to that specific position.
The issue I am having is that the carousel is contained inside another image, and I want the scroll to go to the top of that image.
Changing to href="#contentfeadtures" moves it to the correct position, but it no longer changes the carousel images.
Here is the html.
<div id="contentFeadtures" class="row">
<h1 class="col-White">Features</h1>
<div class="row">
<div id="phonedemo" class="carousel slide" data-ride="carousel">
<div class="phonedemoHouseing">
<div class="phonedemoContainer">
<div class="carousel-inner center-block" role="listbox">
<div class="item active">
<img src="images/carousel-1-ca.jpg" class="img-responsive">
</div>
<div class="item">
<img src="images/carousel-1-.jpg" class="img-responsive">
</div>
<div class="item">
<img src="images/carousel-1-.jpg" class="img-responsive">
</div>
<div class="item">
<img src="images/carousel-1-.jpg" class="img-responsive">
</div>
<div class="item">
<img src="images/carousel-1-.jpg" class="img-responsive">
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#phonedemo" role="button" data-slide="prev">
<img src="images/back.png" class="img-responsive">
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#phonedemo" role="button" data-slide="next">
<img src="images/forward.png" class="img-responsive">
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
jquery
//scrollto
$('.navbar').localScroll(200,{
easing:'elasout'
});
$('section#objective,section#creationdesign,section#features,section#results').localScroll(2000,{
easing:'elasout'
});
So instead of the button scrolling to #phonedemo, I want it go to to #contentfeadtures but retain the moving page ability.
If you are using jQuery then capturing click event of anchor tags and scroll to top of #contentfeadtures may trick out this issue.
$('.carousel-control').on('click', function() {
$('html, body').scrollTo('#contentfeadtures',{duration:'slow', offsetTop : '0'});
});
Another solution you can try out
Replace href with data-target attribute refering to your carousel.
data-target="#phonedemo"
Lokesh Yadav's suggestion of replacing the href with the data-target solved my problem. When I clicked on the carousel control the slide climbed to the top and was hidden behind the menu with affix top. Now it stays static. I'm Brazilian and I needed to translate this comment.
Related
i´m a little new here, i was looking for the answer and i didn´t find it.
I'm starting as a web designer/web developer.
I have a carousel of images in bootstrap, and a div at the top of it. This div is a simple title to the page.
i want to change the color title for a particular image when this is "active".
I tried this (because i saw that the image that is showing change its class name: "carousel-item" to: "carousel-item active") , but doesn't work.
This is my HTML:
<div id="titulo">Game of thrones</div>
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item " data-interval="3000">
<img src="/img/portrait.jpg" class="d-block w-100" alt="throne">
</div>
<div class="carousel-item active" id="dragon" data-interval="3000">
<img src="/img/dragon.jpeg" class="d-block w-100" alt="got" data-interval="3000">
</div>
<div class="carousel-item" >
<img src="/img/houses.jpg" class="d-block w-100" alt="houses" data-interval="3000">
</div>
<div class="carousel-item" >
<img src="/img/evil.jpeg" class="d-block w-100" alt="badguy" data-interval="3000">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script>
const titulo= document.querySelector("#titulo");
const dragon=document.querySelector("#dragon");
if(dragon.classList.contains("active")){
titulo.style.color = "black";
}
</script>
The reason your current code isn't working is because the script only runs once when the page is loaded. Bootstrap comes with events that you can attach a function to which means you can check the class each time the carousel moves. You can read more about carousel events here.
Using the example in the link you can use the following, without changing your existing code too much:
$('#carousel').on('slid.bs.carousel', function () {
const titulo = document.querySelector("#titulo");
const dragon = document.querySelector("#dragon");
if (dragon.classList.contains("active")) {
titulo.style.color = "black";
}
});
Note: the event is slid not slide since the active class isn't applied until the slide transition has completed.
What might be better is to read the relatedTarget of the event and check if that is the dragon:
$('#carousel').on('slide.bs.carousel', function (evt) {
const titulo = document.querySelector("#titulo");
if (evt.relatedTarget.id === 'dragon') {
titulo.style.color = "black";
}
});
I see on the documentation page for bootstrap's carousel there is a property for direction under the events tab but i don't know the syntax to use it and can't find any examples, would appreciate any help on this.
From bootstrap's carousel documentation:
Bootstrap’s carousel class exposes two events for hooking into carousel functionality. Both events have the following additional properties:
direction: The direction in which the carousel is sliding (either "left" or "right").
relatedTarget: The DOM element that is being slid into place as the active item.
from: The index of the current item
to: The index of the next item
The carousel will emit an event called slide.bs.carousel (This event is fired when the carousel has completed its slide transition).
That event object has a property called direction (and its value is either "left" or "right").
$(function() { $("#carouselExampleControls").on("slide.bs.carousel", function(e) {
console.log(e.direction);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="http://lorempixel.com/800/400/food/" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://lorempixel.com/800/400/food/" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://lorempixel.com/800/400/food/" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I've created a carousel using Bootstrap 3. I'm trying to pull the text from the H1 tags to become the prev/next arrows. For example: If Slide 2 is the active slide, the prev arrow should display "Slide 1" and the next arrow should display "Slide 3" instead of displaying arrow icons. So on and so forth with cycling through the slides.
This is my generic carousel code. I would like to set this functionality up using jQuery and have it be dynamic, so that in the future if I add more slides it will pick up the new h1 tags.
<div id="carousel-example-generic" class="carousel slide" data-interval="false" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<h1>Slide 1</h1>
<img src="http://lorempixel.com/output/animals-q-c-640-480-4.jpg" alt="...">
<div class="carousel-caption">
Caption 1
</div>
</div>
<div class="item">
<h1>Slide 2</h1>
<img src="http://lorempixel.com/output/animals-q-c-640-480-8.jpg" alt="...">
<div class="carousel-caption">
Caption 2
</div>
</div>
<div class="item">
<h1>Slide 3</h1>
<img src="http://lorempixel.com/output/animals-q-c-640-480-10.jpg" alt="...">
<div class="carousel-caption">
Caption 3
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">Prev</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">Next</a>
<script>
$('.carousel').on('slid.bs.carousel', function () {
var currentIndex = $('div.active').index() + 1;
});
</script>
How to rendered all the images that are in Carousal from room.html into ImgDashboard.html in MeteorJs. I am new in Meteor framework so I need here all the images comes into carousal in meteor template
<!-- **ImgDashboard.js** -->
Template.ImgDashboard.helpers({
setImageProcessing: function() {
var roomId = localStorage.getItem('roomId');/*set localstorage */
var imageData = ImageData.findOne({RoomId: roomId});
/* ImageData collection in Mongodb */
setTimeout(function(){
var item = "";
imageData.ImageData.forEach(function(data){
var base64String = data.ImageString;
item += '<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3" >\
<div class="center-block" width="300" height="300"
alt="" >\
<img src='+base64String+' class= "img-responsive center-
block"/>\
</div>\</div>'; /* concatenation of images */
}, function(err){
})
$('.image-list').append(item);
},10)
});
<!-- **ImgDashboard.html** -->
<template name="ImgDashboard"> /* template rendered here to display */
{{> Header}}
<div class="container-fluid">
<div> {{setImageProcessing}}</div> /* method from helper */
<div class="image-list">/* images here from helper */
</div>
</div>
</template>
<!-- **Room.html** -->
<div class="container-fluid">
<div class="row">
<div id="carousel-example-generic" class="carousel slide" data-
ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/bedroom-lg.jpeg" class="img-responsive" width="100%" height="597"> /* First block */
</div>
<div class="item">
<img src="images/bedroom-lg.jpeg" class="img-responsive" width="100%" height="597"> /* second block */
</div>
<div class="item">
<img src="images/bedroom-lg.jpeg" class="img-responsive" width="100%" height="597"> /* third block */
</div>
<div class="item">
<img src="images/bedroom-lg.jpeg" class="img-responsive" width="100%" height="597">/* fourth block */
</div>
<div class="item">
<img src="images/bedroom-lg.jpeg" class="img-responsive" width="100%" height="597">/* fifth block */
</div>
</div>
/* -- Controls -- */
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" 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="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
From what I could understand , you want to reuse your html code, in this case you want to reuse your Carousal.
What you can do is make a template which consists your carousal and call that template inside your ImgDashboard template
like this:
{{> carousal}}
Note: I dont think you should store html in your variable like you have done for storing image. What you can do is store the data in an array and iterate in html template using {{#each}} loop
My nav bar is not behaving correctly. It displays the 3 slider images all in a vertical row at the same time and doesn't slide through the pictures. The CSS used is that of twitter bootstrap. I have my own CSS in there but none that affect the carousel, also no added javascript, just the Jquery and the bootstrap.js. This is the bootstrap V3. any idea?
<div class="container">
<div id="carousel-example-generic" class="carousel slide">
<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">
<div class="item active">
<img src="img/timthumb.jpg" alt="...">
<div class="carousel-caption">
<p>Eyes of the owl</p>
</div>
</div>
<div class="item active">
<img src="img/timthumb.jpg" alt="...">
<div class="carousel-caption">
<p>Eyes of the owl</p>
</div>
</div>
<div class="item active">
<img src="img/timthumb.jpg" alt="...">
<div class="carousel-caption">
<p>Eyes of the owl</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-
example-generic" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-
example-generic" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
Your issue seems to be that you have specified active class for all the slides. Specify only for the first one to start with. Specifying active for all of them makes all of them visible and its selector which switches through the slides (not active item which is prev or next on click of buttons fails to pick up anything else) fails to select as there is nothing with non active is available anymore.
<div class="item active">
<img src="http:\\placehold.it\32x100" alt="..." />
<div class="carousel-caption">
<p>Eyes of the owl</p>
</div>
</div>
<div class="item"> <!-- removed active class from here -->
<img src="http:\\placehold.it\42x100" alt="..." />
<div class="carousel-caption">
<p>Eyes of the owl</p>
</div>
</div>
<div class="item"><!-- removed active class from here -->
<img src="http:\\placehold.it\52x100" alt="..." />
<div class="carousel-caption">
<p>Eyes of the owl</p>
</div>
</div>
Fiddle