keep carousel on same slide after refresh - javascript

so i have a bootstrap carousel on my page and i'm trying to change the content of the page depending on which slide in currently showed. i have the current slide index in a javascript variable but can't transfer the value to php. so i am now getting the value with GET but the php variable's value don't change unless i refresh the page, but when i do refresh the page the slides reset to the first one.
how can i let the carousel stay on the same slide even after the page is refreshed? thank you
this is my carousel:
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1" ></li>
<li data-target="#myCarousel" data-slide-to="2" ></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
<li data-target="#myCarousel" data-slide-to="5"></li>
<li data-target="#myCarousel" data-slide-to="6"></li>
<li data-target="#myCarousel" data-slide-to="7"></li>
<li data-target="#myCarousel" data-slide-to="8"></li>
<li data-target="#myCarousel" data-slide-to="9"></li>
<li data-target="#myCarousel" data-slide-to="10"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/wisp.png" alt="WISP" style="width:100%;">
</div>
<div class="item">
<img src="images/linkme.png" alt="linkme" style="width:100%;">
</div>
<div class="item">
<img src="images/zainent.png" alt="zain" style="width:100%;">
</div>
<div class="item">
<img src="images/tahadi.png" alt="tahadi" style="width:100%;">
</div>
<div class="item">
<img src="images/onelife.png" alt="onelife" style="width:100%;">
</div>
<div class="item">
<img src="images/alavina.png" alt="alavina" style="width:100%;">
</div>
<div class="item">
<img src="images/iha.png" alt="iha" style="width:100%;">
</div>
<div class="item">
<img src="images/runnuts.png" alt="runnuts" style="width:100%;">
</div>
<div class="item">
<img src="images/oliviafred.png" alt="oliviafred" style="width:100%;">
</div>
<div class="item">
<img src="images/bandicoot.png" alt="bandicoot" style="width:100%;">
</div>
<div class="item">
<img src="images/bassama.png" alt="bassama" style="width:100%;">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev" onclick="return chooseit()">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next" onclick="return chooseit()">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
and this is my script:
function chooseit() {
var numbit = $('div.active').index() + 1;
history.pushState(null, null, '/work.php?id='+numbit);
}
$(function(){
var carousel = $('.carousel ul');
var carouselChild = carousel.find('li');
var clickCount = 0;
itemWidth = carousel.find('li:first').width()+1; //Including margin
//Set Carousel width so it won't wrap
carousel.width(itemWidth*carouselChild.length);
//Place the child elements to their original locations.
refreshChildPosition();
//Set the event handlers for buttons.
$('.btnNext').click(function(){
clickCount++;
//Animate the slider to left as item width
carousel.finish().animate({
left : '-='+itemWidth
},300, function(){
//Find the first item and append it as the last item.
lastItem = carousel.find('li:first');
lastItem.remove().appendTo(carousel);
lastItem.css('left', ((carouselChild.length-1)*(itemWidth))+(clickCount*itemWidth));
});
});
$('.btnPrevious').click(function(){
clickCount--;
//Find the first item and append it as the last item.
lastItem = carousel.find('li:last');
lastItem.remove().prependTo(carousel);
lastItem.css('left', itemWidth*clickCount);
//Animate the slider to right as item width
carousel.finish().animate({
left: '+='+itemWidth
},300);
});
function refreshChildPosition(){
carouselChild.each(function(){
$(this).css('left', itemWidth*carouselChild.index($(this)));
});
}
function refreshChildPositionNext(){
carouselChild.each(function(){
leftVal = parseInt($(this).css('left'));
});
}
});
thank you in advance !


You could store the current slide number as a local variable.
localStorage.setItem('slide', activeSlideNumber)
Then when the document loads, check to see if the slide variable exists in storage as follows.
$(function() {
var slide = localStorage.getItem('slide');
if (slide === null) {
// start from the top
} else {
// start from slide number in storage
}
});


$('#myCarousel').on('slid.bs.carousel', function () {
var currentSlide = $('#myCarousel div.active').index();
sessionStorage.setItem('lastSlide', currentSlide);
});
if(sessionStorage.lastSlide){
$("#myCarousel").carousel(sessionStorage.lastSlide*1);
}
this worked perfectly for me !

Related

How to get img url from api which is key based in angular 5?

I'm using angular 5. I write bellow http.get method to get data from api in angular 5. I want to get the url of image to use this in my slider.
getImages(){
this.httpclient.get('blabla/banner.php').subscribe((result) => {
this.images = result;
console.log(this.images);
})
}
but I'm getting data from api which id based below is my response
{
status:"success",
…
}img:[
{
id:"1",
banner:"/upload/img.jpg"
},
…
]0:{
id:"1",
banner:"pload/img.jpg"
}1:{
id:"2",
banner:"load/img2.jpg"
}2:{
id:"3",
banner:"/admin/upload/img3.jpg"
}status:"success"
this my html template. I don't know is this right or wrong.
<div class="container">
<div class="row">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<button ></button>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active" *ngFor="let image of images">
<img src="{{image.banner}}">
</div>
<!-- <div class="item">
<img src="http://asianstylemagazine.com/wp-content/uploads/2016/04/housefull-1.jpg" alt="Chicago">
</div>
<div class="item">
<img src="https://www.artsfon.com/large/201705/97685.jpg" alt="New York">
</div>
</div> -->
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
I'm getting this after using result.img
I'm beginner to angular please help. Thank you.

In ts take the object as given below,
getImages(){
this.httpclient.get('blabla/banner.php').subscribe((result) => {
this.images = result.img; // store the img array in this.images
})
}
The images variable will have the img array.
Now go to your template and use *ngFor
Example:-
<div *ngFor="let image of images">
<img src="{{image.banner}}" alt="banners">
</div>
image in ngFor will iterate through your array img and get all the urls.
Hope this helps

You need to make sure you get the correct data
getImages(){
this.httpclient.get('blabla/banner.php').subscribe((result : any) => {
this.images = result.img;
})
}
Also, in your carrousel, you need to make sure that only one item is active at the beginning (for now, all items have the active class)
<div class="item" [ngClass]="{'active': i==0}" *ngFor="let image of images; let i = index">

how to disable left and right arrow in slide using bootstrap

I need to create a slide when the image is first the left arrow should be hide and when the last image is active right arrow should be hide. I had added my code here. Is there any other alternative method to replace or any new method. Is there any option to modify the code, Can anyone point me in the right direction?
$("[id^=viewDocs]").on("click", function () {
var docId = $(this).attr("id");
var docIndex = docId.substr(docId.length - 1);
var activeItemId = $(this).data("value");
$("div>div.item").removeClass("active");
$("#"+activeItemId).addClass("active");
var appName = $('#SavepatientResultsDetails_appName').val();
var paramValue = $(this).data("id");
$("#myModal").removeClass("hidden");
$('#downloadDocId').attr('href',appName+'/apps/PatientDetailsDoctor/ViewPatientTestResults/downloadUploadDocs?testResultsDocsId='+paramValue);
var modal = document.getElementById("myModal");
modal.style.display = "block";
});
$('#myCarousel').on('slide.bs.carousel', function (ev) {
var itemId = ev.relatedTarget.id;
var paramValue = $('#'+itemId).data('value');
var appName = $('#SavepatientResultsDetails_appName').val();
$('#downloadDocId').attr('href',appName+'/apps/PatientDetailsDoctor/ViewPatientTestResults/downloadUploadDocs?testResultsDocsId='+paramValue);
});
.carousel-inner > .item > img,
.carousel-inner > .item > div,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="downloadDocId" href="/doctorclinic/apps/PatientDetailsDoctor/ViewPatientTestResults/downloadUploadDocs?testResultsDocsId=100250">
<span class="download-file" onclick="document.getElementById('myModal').style.display='none'"><i class="glyphicon glyphicon-download-alt"></i></span>
</a>
<a id="downloadDocId" href="#">
<span class="close-popup" onclick="document.getElementById('myModal').style.display='none'">×</span>
</a>
<div class="modal-content1" id="img01">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li id="indicator1" data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li id="indicator2" data-target="#myCarousel" data-slide-to="1" class=""></li>
<li id="insesrtIndicator" class="hidden"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div id="insertCarouselItem" class="hidden"></div>
<div class="item active" data-value="100250" id="docPdf1">
<div id="pdfDoc1">
<canvas height="841" width="595" style="display: block;"></canvas>
</div>
</div>
<div class="item" data-value="100301" id="docImage2"></div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev" style="display: none;">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>

You can use these JavaScript codes.
First:
$('.left').hide();
$('#carousel-example-generic').on('slid.bs.carousel', function (ev) {
var carouselData = $(this).data('bs.carousel');
var currentIndex = carouselData.getActiveIndex();
if (currentIndex >= 1) {
$('.left').show();
}
else {
$('.left').hide();
}
if (currentIndex === (carouselData.$items.length-1)) {
$('.right').hide();
$('.left').show();
}
else {
$('.right').show();
}
})
Second
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length>0) {
next.next().children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
$('#myCarousel').on('slid', '', checkitem);
$(document).ready(function(){
checkitem();
});
function checkitem()
{
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();
}
}
Here I used the second JavaScript example and made what you want:
$('.left').hide();
$('#carousel-example-generic').on('slid.bs.carousel', function (ev) {
var carouselData = $(this).data('bs.carousel');
var currentIndex = carouselData.getActiveIndex();
if (currentIndex >= 1) {
$('.left').show();
}
else {
$('.left').hide();
}
if (currentIndex === (carouselData.$items.length-1)) {
$('.right').hide();
$('.left').show();
}
else {
$('.right').show();
}
})
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="//placehold.it/1024x600" class="img-responsive">
<div class="carousel-caption">
one
</div>
</div>
<div class="item">
<img src="//placehold.it/1024x600/999" class="img-responsive">
<div class="carousel-caption">
two
</div>
</div>
<div class="item">
<img src="//placehold.it/1024x600/bbb" class="img-responsive">
<div class="carousel-caption">
three
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
Hope it'll helps you. Good luck! :)

add class on scroll in bootstrap tabing

i need a small help for add a class on scroll in bootstrap tabbing carousal.
so here is my page url
when i click on any point from tabing like 1,2,3.. active class is adding on tabing on same that is perfect i use this is script
$('#myCarousel').bind('mousewheel', function(e){$(this).carousel('next');});
$('.tab li').on('click', function(){
$('li.active').removeClass('active');
$(this).addClass('active');
});
it is working perfect as class is adding on li.active but i also want .active class on current tab when i scroll in tab container. i have added scroll code and working perfect but need class to add in .tab li when i scroll
here is HTML code as well
<div class="tab">
<div class="container-tab">
<ul class="list-inline nav">
<li data-target="#myCarousel" data-slide-to="0" class="active"> <a href="#">
<div class="round-tab-num"> 1 </div>
<p>Working Smart <small>not harder</small> </p>
</a> </li>
<li data-target="#myCarousel" data-slide-to="1"> <a href="#">
<div class="round-tab-num"> 2 </div>
<p>Working Smart <small>not harder</small> </p>
</a> </li>
<li data-target="#myCarousel" data-slide-to="2"> <a href="#">
<div class="round-tab-num"> 3 </div>
<p>Working Smart <small>not harder</small> </p>
</a> </li>
<li data-target="#myCarousel" data-slide-to="3"> <a href="#">
<div class="round-tab-num"> 4 </div>
<p>Working Smart <small>not harder</small></p>
</a> </li>
<li data-target="#myCarousel" data-slide-to="4"> <a href="#">
<div class="round-tab-num"> 5 </div>
<p>Working Smart <small>not harder</small></p>
</a> </li>
</ul>
<!--The main div for carousel-->
<div id="myCarousel" class="carousel horizantal slide" data-interval="false">
<!-- Sliding images statring here -->
<div class="carousel-inner">
<div class="item active">
<div class="carousel-caption">
<h3>test1</h3>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h3>test2</h3>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h3>test3</h3>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h3>test4</h3>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h3>test5</h3>
</div>
</div>
</div>
<!-- Next / Previous controls here -->
<div> </div>
</div>
</div>
</div>
this code is also added
$(document).ready( function() {
$('#myCarousel').carousel({
interval: 4000
});
var clickEvent = false;
$('#myCarousel').on('click', '.container-tab .nav a', function() {
clickEvent = true;
$('.container-tab .nav li').removeClass('active');
$(this).parent().addClass('active');
}).on('slid.bs.carousel', function(e) {
if(!clickEvent) {
var count = $('.container-tab .nav').children().length -1;
var current = $('.container-tab .nav li.active');
current.removeClass('active').next().addClass('active');
var id = parseInt(current.data('slide-to'));
if(count == id) {
$('.container-tab .nav li').first().addClass('active');
}
}
clickEvent = false;
});
});

change your code as below simply remove class from currently active li and add active class to next li as below
$('#myCarousel').bind('mousewheel', function(e) {
$(this).carousel('next');
var $currentlyactive =$('li.active');
$currentlyactive.removeClass('active');
$currentlyactive.next().addClass('active');
});
Updated
$(document).ready(function() {
$('.carousel').carousel('pause');
});
$('#myCarousel').bind('mousewheel', function(e){$(this).carousel('next');});
$('.tab li').on('click', function(){
$('li.active').removeClass('active');
$(this).addClass('active');
});
this is the code in your html page remove this all carousel related code has been done in custom.js..

Bootstrap Carousel slide is not smooth for "NEXT" but smooth for "PREVIOUS"

I am using bootstrap as a framework for a website I am helping with. On the front page of the website is a carousel. For some odd reason, the carousel "slide" transition is very smooth when clicking on the left arrow (PREVIOUS); however it seems to go all weird when clicking the right arrow (NEXT)
I've tried looking online as well as in the bootstrap files (CSS and JS)
I cannot seem to find anything. I've tried re-copying the code from the bootstrap website for carousels. Not sure what's wrong.
URL: www.acebac.org
Help? :D

Here is JQuery code:
var $item = $('.carousel .item');
var $wHeight = $(window).height();
$item.eq(0).addClass('active');
$item.height($wHeight);
$item.addClass('full-screen');
$('.carousel img').each(function() {
var $src = $(this).attr('src');
var $color = $(this).attr('data-color');
$(this).parent().css({
'background-image' : 'url(' + $src + ')',
'background-color' : $color
});
$(this).remove();
});
$(window).on('resize', function (){
$wHeight = $(window).height();
$item.height($wHeight);
});
$('.carousel').carousel({
interval: 5000,
pause: "false"
});
HTML code:
<div id="mycarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#mycarousel" data-slide-to="0" class="active"> </li>
<li data-target="#mycarousel" data-slide-to="1"></li>
<li data-target="#mycarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item">
<img src="img/bg.jpg" data-color="lightblue" alt="First Image">
<div class="carousel-caption">
<h3>First Image</h3>
</div>
</div>
<div class="item">
<img src="img/bg1.jpg" data-color="firebrick" alt="Second Image">
<div class="carousel-caption">
<h3>Second Image</h3>
</div>
</div>
<div class="item">
<img src="img/bg2.jpg" data-color="violet" alt="Third Image">
<div class="carousel-caption">
<h3>Third Image</h3>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#mycarousel" 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="#mycarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
See Demo:Demo Carousel Bootstrap

how to navigate two carousel by single navigator at same time

There I have used 2 carousel 1st is slide to text and second is navigate image inside mobile frame but both are not sliding same time if it will navigate by navigator then mov
live on http://ashish.net63.net I have used bootstrap carousel here if you have any other carousel for this type of alider please help me thanks in advance
$(function(){
$('.carousel-sync').on('slid.bs.carousel', function(ev) {
$('.carousel-sync').removeClass('sliding');
});
$('.carousel-indicators li').on('click', function() {
$('#myCarousel1,#myCarousel2').carousel(parseInt(this.getAttribute('data-slide-to')));
});
});
<div class="col-md-6 col-sm-12 col-xs-12">
<div id="myCarousel1" class="carousel slide carousel-sync" data-ride="carousel" data-pause="false">
<ol class="carousel-indicators">
<li data-slide-to="0" class="active"></li>
<li data-slide-to="1"></li>
<li data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
<a class="carousel-arrow carousel-arrow-prev" href="[id*=myCarousel]" data-slide="prev">
</a>
<a class="carousel-arrow carousel-arrow-next" href="[id*=myCarousel]" data-slide="next">
</a>
</div><!-- /.carousel -->
2nd carousel from here
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="mo-holder img-responsive">
<div id="myCarousel2" class="carousel slide carousel-sync" data-ride="carousel" data-pause="false">
<div class="carousel-inner">
<div class="item active">
<img src="images/1screen.jpg" class="img-responsive" alt="...">
</div>
</div>
</div>
</div>

You can use something like:
$( document ).ready(function() {
$('#carousel1').carousel({
interval: 10000
});
$('#carousel2').carousel({
interval: 10000
});
});
This way both carousels will start up with an interval of 10 seconds inbetween slides.

Categories

Resources