We Keep Coding

Setting up bootstrap carousel

I am using single bootstrap carousel and facing one problem. The carousel has several items/images to show, and one of these items must be an active one. Here`s the code:
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="**active item**">…</div>
<div class="item">…</div>
<div class="item">…</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
But, I have a one variable for all images in php. I am leaving an active item as blank, and setting loop for item as followingly:
<div class="**active item**">…</div>
{section name=x loop=$similar_data}
<div class="item">…</div>
{/section}
How can I set first picture from all pictures for an active one?
Here`s the link to see how my carousel works.

Here's how to set the first item active with JavaScript:
const carouselInner = document.querySelector('.carousel-inner');
function makeFirstItemActive() {
const firstItem = carouselInner.firstElementChild;
firstItem.classList.add('active');
console.log('first item:', firstItem);
}
makeFirstItemActive();
<div class="carousel-inner">
<div class="item">first item</div>
<div class="item">second item</div>
<div class="item">third item</div>
</div>

Duplicating button bar without cloning

I am having an issue duplicating a button bar without making and exact clone of the first button bar. In my attempt, the second button bar that forms does not work properly. When the buttons are clicked, they do nothing. I want all duplicated button bars to be new and standalone. Any assistance with this would be greatly appreciated. Please see my working code as an example. http://codepen.io/EBM84/pen/RKyNpE?editors=1010
<div id="pfs-tab3" class="tab">
<div class="duplicate-sections">
<div class="form-section">
<section class="duplicate-container">
<div class="tabs">
<ul class="tab-links main-tab-links button-bar" style="margin-top:0;">
<li class="active">box 1</li>
<li>Box 2</li>
</ul>
<div class="tab-content" style="max-height: 125px;">
<div id="notes-tab1" class="tab active">
<div class="tab-content-scroll button-bar-scroll button-bar-scroll-notes">
<div class="text-field" style="max-width:375px;">
<p class="checkbox-label">Name</p><input type="text" class="text-box-column">
</div>
</div> <!-- End .button-bar-scroll -->
</div> <!-- End .notes-tab1 -->
<div id="notes-tab2" class="tab">
<div class="tab-content-scroll button-bar-scroll button-bar-scroll-notes">
<div class="text-field" style="max-width:375px;">
<p class="checkbox-label">Amount</p><input type="text" placeholder="$" class="text-box-column">
</div>
</div> <!-- End .button-bar-scroll -->
</div> <!-- End .notes-tab2 -->
</div> <!-- End .tab-content -->
</div> <!-- End .tabs -->
</section> <!--duplicate-container -->
</div> <!-- End .form sections -->
</div> <!-- End .duplicate sections -->
<a class="btn btn-duplicate addsection" href="#" role="button" data-section='0'>+ Add</a>

Buttons inside cloned sections do not work because .clone() by default do not copy event handlers. You should use .clone(true) if you wish to copy event handlers as well.
https://api.jquery.com/clone/
When cloning events this way, make sure you pick up target elements within event handlers more precisely.
For example:
//following line will show/hide tabs the $(document) //incorrect
jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
//following line will show/hide only tabs inside particular ('.form-section') //correct
jQuery(this).parents('.form-section').find('.tabs ' + currentAttrValue).show().siblings().hide();

Bootstrap Carousel to have different URL for each slide

My bootstrap carousel is located here: testdomain.org/about.html and when the slide changes, the URL in the address bar remains the same. I want the URL to auto change when the slides change to something like this:
https://testdomain.org/about.html#slide1
https://testdomain.org/about.html#slide2
https://testdomain.org/about.html#slide3
How can we make this happen?I created this JSFiddle Demo for your convenience. I don't know how to go about writing JS for this :(
It's the standard bootstrap HTML:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img_chania.jpg" alt="Chania">
<div class="">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="img_chania2.jpg" alt="Chania">
<div class="">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="img_flower.jpg" alt="Flower">
<div class="">
<h3>Flowers</h3>
<p>Beatiful flowers in Kolymbari, Crete.</p>
</div>
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower">
<div class="">
<h3>Flowers</h3>
<p>Beatiful flowers in Kolymbari, Crete.</p>
</div>
</div>
</div>
<!-- Left and right 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>
DEMO Screenshot of the URL in the Address bar should look like this

Use the carousel Events to determine when a slide transition happens and which slide has been activated. Then update the address bar and browser history with the slide URL. Instructions for both are at the links below:
http://getbootstrap.com/javascript/#carousel-events
Updating address bar with new URL without hash or reloading the page

Try adding the following javascript, amending references where applicable. You will also need to add an ID to <div class="carousel-inner" role="listbox">. I worked the below off the following - <div class="carousel-inner" id="listbox" role="listbox">.
childsList = Array.prototype.slice.call( document.getElementById('listbox').children );
$("#myCarousel").on('slide.bs.carousel', function (event) {
window.location.hash = "slide" + (childsList.indexOf(event.relatedTarget) + 1);
}
This picks up the event of a slide changing, picks up the index of the slide and sets the '#' in the URL to '#slide[index of slide + 1]'. I hope this helps.
Here is a fiddle doing the same thing but outputting to a rather than the URL. https://jsfiddle.net/JokerDan/22botkvm/

Bootstrap Carousel Don't start from the beginning

I am implementing a fancy survey with carousel.
<div id="myCarousel" class="carousel slide" data-interval="false" data-ride="carousel" style="vertical-align: center">
<!-- 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>
...
<li data-target="#myCarousel" data-slide-to="n"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
page 1
</div>
<div class="item">
page 2
</div>
...
<div class="item">
page n
</div>
</div>
<!-- Left and right controls -->
<a class="left" 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" 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>
Is there a way to make carousel behave more like a sliding window which mean that it is not possible to go in an n-element carousel:
from Page 1 to Page n
from Page n to Page 1
EDIT
Somehow it seems that i discribed the problem not well enought. So i try better:
So first of all the carousell is in its original purouse meant for displaying pictures:
http://www.w3schools.com/bootstrap/bootstrap_carousel.asp
i know use different forms inside each "Page" of the carousel.
You can go to the next "Page" of a carousel by clicking on the button on the right or to the last if you click the button on th right.
Now my only problem is - since this shall become a survey - that when Page one with my first question loads, a user can click the button on the left and will go to the end of the carousel (last page/page n).
Is it possible to disable this feature?

I am sure there are more elegant solutions, but this might get you started:
jsFiddle Demo
HTML:
<div class="container">
<div class="row">
<div id="s1" class="slide">
<div class="shead">Slide Title 1</div>
<div class="sbody">Here is body of slide 1 with questions</div>
<div class="sfoot"><button>Next</button></div>
</div><!-- .slide -->
<div id="s2" class="slide">
<div class="shead">Slide Title 2</div>
<div class="sbody">Here is body of slide 2 with questions</div>
<div class="sfoot"><button>Next</button></div>
</div><!-- .slide -->
<div id="s3" class="slide">
<div class="shead">Slide Title 3</div>
<div class="sbody">Here is body of slide 3 with questions</div>
<div class="sfoot"><button>Next</button></div>
</div><!-- .slide -->
<div id="s4" class="slide">
<div class="shead">Slide Title 4</div>
<div class="sbody">Thank you for taking this survey</div>
</div><!-- .slide -->
</div><!-- .row -->
</div><!-- .container -->
JS:
var cnt=1;
$(function(){
$('body').css({'background':'wheat'});
$('#s'+cnt).css({'margin-left':0});
$('button').click(function(){
$('#s'+cnt).animate({
marginRight:'100%'
},500);
cnt++;
$('#s'+cnt).animate({
marginLeft:'0%'
},500,function(){
//reset slide position, in case you wish to add a "Go Back one slide" btn
$('#s'+cnt-1).css({'margin-left':'100%'});
});
});
});//END document.ready
CSS:
html,body{height:500px;width:100%;overflow:hidden;}
div{position:relative;}
.row{height:400px;width:100%;}
.slide{position:absolute;top:0;margin-left:100%;height:100%;width:100%;padding:20px;}
.shead{height:50px;width:100%;color:#aaa;background:#222;}
.sbody{height:300px;width:100%;padding:20px;}
.sfoot{height:50px;width:100%;}
.sfoot button{padding:12px 20px;background:darksteelgrey;color:#888;}
#s1{color:white;background:darkcyan;}
#s2{color:yellow;background:red;}
#s3{color:#333;background:palegreen;}
#s4{color:yellow;background:blue;font-size:2rem;}

How to make a div slider?

I am trying to make a slider which scrolls over 3 div elements on to 3 new scroll elements. I am looking for a manual slider with an arrow pointing right on the right side and left on the left side. The slider should slide right when right arrow clicked and display the 3 remaining div elements. If the left arrow is clicked first, nothing should happen. if it is clicked after the right arrow has been clicked it should slide back to the three previous div elements. If the right arrow is clicked twice in a row the second click should slide back to the initial 3 div elements. Basically, I want to end up with something like the slider on the unity website. Link: http://unity3d.com/unity
Here is my HTML code so far. It displays the boxes on 3 columns and 2 rows:
<div class="categories">
<div class="category">
<div class="rect">
<img src="stuff.gif">
</div>
<h3>Stuff</h3>
<p>Stuff.</p>
</div>
<div class="category">
<div class="rect">
<img src="stuff.gif">
</div>
<h3>Stuff</h3>
<p>Stuff.</p>
</div>
<div class="category">
<div class="rect">
<img src="stuff.gif">
</div>
<h3>Stuff</h3>
<p>Stuff.</p>
</div>
<div class="category">
<div class="rect">
<img src="stuff.gif">
</div>
<h3>Stuff</h3>
<p>Stuff.</p>
</div>
<div class="category">
<div class="rect">
<img src="stuff.gif">
</div>
<h3>Stuff</h3>
<p>Stuff.</p>
</div>
<div class="category">
<div class="rect">
<img src="stuff.gif">
</div>
<h3>Stuff</h3>
<p>Stuff.</p>
</div>
</div>
Here are the CSS styles for the boxes:
/**********************
*******CATEGORIES******
**********************/
.categories {
width: 90%;
margin: 3% 9%;
clear: left;
}
.category {
padding: 7% 5% 3% 5%;
width: 20%;
border: 1px solid #E0E0E0;
float: left;
cursor: pointer;
text-align: center;
}
.category:hover {
border: 1px solid #4F8E64;
}
.category h3 {
color: #3F7250;
margin: 6% 0;
}
.category p {
text-align: center;
}
Make sure that the padding and margin and width stays in percentages. Feel free to modify the code and share it with me on fiddle or something.

You can use Caroufredsel jquery plugin for it. Here is the installation page:
http://dev7studios.com/caroufredsel-old/installation.php
And here is an example next to yours:
http://coolcarousels.frebsite.nl/c/58/
When you scroll down in the example and click [..] in the orange bar - you will see the code for the example.
This is the code for your carousel:
$('#carousel').carouFredSel({
width: '90%',
items: 3,
scroll: 3,
auto: false,
prev: '#prev',
next: '#next',
infinite: false
});
You can use also circular: false if you want the slides not to be circular.

Ok, so following comments if you consider bootstrap, include bootstrap js and css
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
HTML
<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" role="listbox">
<div class="item active">
<section>
Some Info
</section>
<section>
Some Info 2
</section>
<section>
Some Info 3
</section>
</div>
<div class="item">
<section>
Some Info
</section>
<section>
Some Info 2
</section>
<section>
Some Info 3
</section>
</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>
CSS
section{
display:inline-block;
border:1px solid black;
}
.item{
text-align:center
}
You can manipulate the sections and content as you please.

you can do it using jQuery need to sit for sometime and make custome slider and it will works according to you logic.
Hope this will help you.