Here is i have a text slider that's HTML content have structure something Like this:
<div id="inner">
<div class="gallery-slide is-active">
<div class="slide-content">Question-1 : The color of the sky is...?</div></div>
<div class="gallery-slide"><div class="slide-content">Question-2 : Paper comes from...?</div></div>
<div class="gallery-slide"><div class="slide-content">Question-3 : How many hours in a day?</div></div>
<div class="gallery-slide"><div class="slide-content">Question-4 : A Giraffe is a fish?</div></div>
</div>
If i add HTML manually then the slider work perfectly. means every time when i click Next and Prev Buttons the slider work correctly to switching next and previous slides.
see this :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CodePen - Flexbox Content Slider</title>
<style>
.gallery {
position: relative;
width: 100%;
overflow: hidden;
padding: 2em 0;
}
.gallery-slides {
position: relative;
max-width: 1280px;
width: 100%;
height: 100vh;
margin: 0 auto;
}
.gallery-slide {
position: absolute;
height: 100%;
display: -webkit-box;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
-webkit-box-align: center;
align-items: center;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 0;
-webkit-box-ordinal-group: 3;
order: 2;
-webkit-transition-property: opacity, -webkit-transform;
transition-property: opacity, -webkit-transform;
transition-property: transform, opacity;
transition-property: transform, opacity, -webkit-transform;
-webkit-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
/* ease-in-out */
}
.gallery-slide.is-active {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
-webkit-box-ordinal-group: 2;
order: 1;
}
.gallery-slide.is-active~* {
-webkit-transform: translateX(100%);
transform: translateX(100%);
/* E ~ F an F element preceded by an E element
is-active ~ nextSlide element */
}
.gallery-selectors {
width: 5%;
height: 100%;
position: absolute;
top: 0;
right: 2.5%;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
flex-wrap: wrap;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: end;
align-items: flex-end;
}
.gallery-selector {
border: 1px solid #343434;
border-radius: 50%;
padding: 1.2em 1.5em;
margin-bottom: 0.5em;
text-decoration: none;
color: #343434;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: .3s;
transition-duration: .3s;
}
.gallery-selector:hover {
background-color: #343434;
color: #e2e2e2;
}
.gallery-selector.is-active {
background-color: #343434;
color: #e2e2e2;
}
.slide-img {
-webkit-box-flex: 0;
flex: 0 0 50%;
}
.slide-img img {
max-width: 100%;
height: auto;
border-radius: 5px;
}
.slide-content {
-webkit-box-flex: 0;
flex: 0 1 50%;
padding-top: 2em;
padding-bottom: 2em;
padding-left: 2em;
padding-right: 10%;
}
.slide-content h2 {
color: #fff;
font-size: 2.2em;
line-height: 1;
margin-top: 0;
}
.slide-content p {
color: #343434;
font-size: 1.2em;
line-height: 1.5em;
}
/* Background mapColor */
.background-teal {
background-color: #54b3a6;
}
.background-red {
background-color: #e72b1e;
}
@media only screen and (max-width: 960px) {
.gallery-slide {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
}
.slide-img {
padding-left: 2em;
padding-right: 15%;
-webkit-box-flex: 0;
flex: 0 0 auto;
}
.slide-content {
padding-right: 15%;
-webkit-box-flex: 0;
flex: 0 0 auto;
}
}
@media only screen and (max-width: 640px) {
.gallery-selectors {
width: 100%;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
right: 0;
bottom: 0;
}
.gallery-selector {
padding: 0.5em 0.8em;
margin-right: 0.5em;
}
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<section class="gallery background-teal">
<button data-btn="prev" class="slider-pagination">Pre.❮</button>
<button data-btn="next" class="slider-pagination">Next ❯</button>
<div class="gallery-slides">
<div id="inner">
<div class="gallery-slide is-active">
<div class="slide-content">Question-1 : The color of the sky is...?</div></div>
<div class="gallery-slide"><div class="slide-content">Question-2 : Paper comes from...?</div></div>
<div class="gallery-slide"><div class="slide-content">Question-3 : How many hours in a day?</div></div> <div class="gallery-slide"><div class="slide-content">Question-4 : A Giraffe is a fish?</div></div>
</div>
</div>
</section>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'></script>
<script>
//Javascript Module Pattern
//app.js
var total_slides = $('.gallery-slides .gallery-slide').length;
var remaining_slides = total_slides - 1;
$(document).on('click', '.slider-pagination', function() {
var btn = $(this).attr('id');
var current_slide = $('.is-active');
if ($(this).attr('data-btn') == 'next') {
var next_slide = $(".gallery-slide").eq($(".gallery-slide").index($(current_slide)) + 1);
if (next_slide.hasClass('gallery-slide')) {
current_slide.removeClass('is-active');
next_slide.addClass('is-active');
} else {
var next_slide = $(".gallery-slide").eq($(".gallery-slide").index($(current_slide)) - remaining_slides);
current_slide.removeClass('is-active');
next_slide.addClass('is-active');
}
} else {
var next_slide = $(".gallery-slide").eq($(".gallery-slide").index($(current_slide)) - 1);
if (next_slide.hasClass('gallery-slide')) {
current_slide.removeClass('is-active');
next_slide.addClass('is-active');
} else {
var next_slide = $(".gallery-slide").eq($(".gallery-slide").index($(current_slide)) - remaining_slides);
current_slide.removeClass('is-active');
next_slide.addClass('is-active');
}
}
});
var app = function() {
var defaults = [];
return {};
}();
$(function() {
// new app.gallery();
$('.gallery').each(function() {
//$(this).data(new app.gallery(this));
});
});
//myModule
app.gallery = function($, _, app) {
var def = function(el, opts) {
this.$els = {
'el': $(el)
};
this.options = _.extend({
link: 'data-link'
}, opts);
console.log(this.options.link);
this.controller = this.$els.el.find('.slider-div');
// this.$gallery = this.$els.el.find('.gallery-slides');
// this.$slide = this.$els.el.find('.gallery-slide');
this.states = {
'active': 'is-active'
};
init.call(this);
};
var init = function() {
this.bind();
};
def.prototype = {
bind: function() {
console.log('gallery loaded');
var self = this;
this.setActive(1);
this.controller.on('click', _.bind(this.slideNext, this));
},
slideNext: function(ev) {
var i = $(ev.currentTarget).attr(this.options.link);
this.setActive(i);
},
setActive: function(index) {
var self = this;
this.currentActive = index;
this.controller.removeClass(this.states.active).filter(function() {
return $(this).attr(self.options.link) == index;
}).addClass(self.states.active);
}
};
return def;
}
(jQuery, _, app);
</script>
</body>
</html>But Now, Here i added a text box that is doing the task of adding content to slider from text box means when i add these lines through text box, the Next and Prev button work correctly, But But at the last Question means after Number 4 question when we click on Next button there is one time show Blank Space, and then it takes to first slide/Question, Why? Here i want to remove the Blank Space after four number question.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CodePen - Flexbox Content Slider</title>
<style>
.gallery {
position: relative;
width: 100%;
overflow: hidden;
padding: 2em 0;
}
.gallery-slides {
position: relative;
max-width: 1280px;
width: 100%;
height: 100vh;
margin: 0 auto;
}
.gallery-slide {
position: absolute;
height: 100%;
display: -webkit-box;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
-webkit-box-align: center;
align-items: center;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 0;
-webkit-box-ordinal-group: 3;
order: 2;
-webkit-transition-property: opacity, -webkit-transform;
transition-property: opacity, -webkit-transform;
transition-property: transform, opacity;
transition-property: transform, opacity, -webkit-transform;
-webkit-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
/* ease-in-out */
}
.gallery-slide.is-active {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
-webkit-box-ordinal-group: 2;
order: 1;
}
.gallery-slide.is-active~* {
-webkit-transform: translateX(100%);
transform: translateX(100%);
/* E ~ F an F element preceded by an E element
is-active ~ nextSlide element */
}
.gallery-selectors {
width: 5%;
height: 100%;
position: absolute;
top: 0;
right: 2.5%;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
flex-wrap: wrap;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: end;
align-items: flex-end;
}
.gallery-selector {
border: 1px solid #343434;
border-radius: 50%;
padding: 1.2em 1.5em;
margin-bottom: 0.5em;
text-decoration: none;
color: #343434;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: .3s;
transition-duration: .3s;
}
.gallery-selector:hover {
background-color: #343434;
color: #e2e2e2;
}
.gallery-selector.is-active {
background-color: #343434;
color: #e2e2e2;
}
.slide-img {
-webkit-box-flex: 0;
flex: 0 0 50%;
}
.slide-img img {
max-width: 100%;
height: auto;
border-radius: 5px;
}
.slide-content {
-webkit-box-flex: 0;
flex: 0 1 50%;
padding-top: 2em;
padding-bottom: 2em;
padding-left: 2em;
padding-right: 10%;
}
.slide-content h2 {
color: #fff;
font-size: 2.2em;
line-height: 1;
margin-top: 0;
}
.slide-content p {
color: #343434;
font-size: 1.2em;
line-height: 1.5em;
}
/* Background mapColor */
.background-teal {
background-color: #54b3a6;
}
.background-red {
background-color: #e72b1e;
}
@media only screen and (max-width: 960px) {
.gallery-slide {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
}
.slide-img {
padding-left: 2em;
padding-right: 15%;
-webkit-box-flex: 0;
flex: 0 0 auto;
}
.slide-content {
padding-right: 15%;
-webkit-box-flex: 0;
flex: 0 0 auto;
}
}
@media only screen and (max-width: 640px) {
.gallery-selectors {
width: 100%;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
right: 0;
bottom: 0;
}
.gallery-selector {
padding: 0.5em 0.8em;
margin-right: 0.5em;
}
}
</style>
</head>
<textarea class="input" id="input" placeholder="Message..."></textarea>
<button class="waves-effect waves-light" id="send-btn">add text</button>
<body>
<!-- partial:index.partial.html -->
<section class="gallery background-teal">
<button data-btn="prev" class="slider-pagination">Pre.❮</button>
<button data-btn="next" class="slider-pagination">Next ❯</button>
<div class="gallery-slides">
<div id="inner"> </div>
</div>
</section>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'></script>
<script>
const sendButton = document.getElementById('send-btn');
const textArea = document.getElementById('input');
const innerDiv = document.getElementById('inner');
var message = textArea.value;
sendButton.addEventListener('click', function() {
// split the textarea entries into an array
let lines = (textArea.value).split("\n");
// iterate over each line, creating a div/span and inserting into the DOM
lines.forEach( (line, index) => {
let encodedLine = encodeHtmlEntity(line);
let classList = 'gallery-slide';
if (index === 0) {
classList += ' is-active'
}
let newElement = `<div class="${classList}"><div class="slide-content">${encodedLine}</div></div>`;
innerDiv.innerHTML += newElement;
});
// reset the textarea
textArea.value = '';
});
function encodeHtmlEntity(input) {
var output = input.replace(/[\u00A0-\u9999<>\&]/gim, function(i) {
return '&#' + i.charCodeAt(0) + ';';
});
return output;
}
$('.quiz').eq(0).addClass('classYouNeedToAdd');
</script>
<script>
//Javascript Module Pattern
//app.js
var total_slides = $('.gallery-slides .gallery-slide').length;
var remaining_slides = total_slides - 1;
$(document).on('click', '.slider-pagination', function() {
var btn = $(this).attr('id');
var current_slide = $('.is-active');
if ($(this).attr('data-btn') == 'next') {
var next_slide = $(".gallery-slide").eq($(".gallery-slide").index($(current_slide)) + 1);
if (next_slide.hasClass('gallery-slide')) {
current_slide.removeClass('is-active');
next_slide.addClass('is-active');
} else {
var next_slide = $(".gallery-slide").eq($(".gallery-slide").index($(current_slide)) - remaining_slides);
current_slide.removeClass('is-active');
next_slide.addClass('is-active');
}
} else {
var next_slide = $(".gallery-slide").eq($(".gallery-slide").index($(current_slide)) - 1);
if (next_slide.hasClass('gallery-slide')) {
current_slide.removeClass('is-active');
next_slide.addClass('is-active');
} else {
var next_slide = $(".gallery-slide").eq($(".gallery-slide").index($(current_slide)) - remaining_slides);
current_slide.removeClass('is-active');
next_slide.addClass('is-active');
}
}
});
var app = function() {
var defaults = [];
return {};
}();
$(function() {
// new app.gallery();
$('.gallery').each(function() {
//$(this).data(new app.gallery(this));
});
});
//myModule
app.gallery = function($, _, app) {
var def = function(el, opts) {
this.$els = {
'el': $(el)
};
this.options = _.extend({
link: 'data-link'
}, opts);
console.log(this.options.link);
this.controller = this.$els.el.find('.slider-div');
this.$gallery = this.$els.el.find('.gallery-slides');
this.$slide = this.$els.el.find('.gallery-slide');
this.states = {
'active': 'is-active'
};
init.call(this);
};
var init = function() {
this.bind();
};
def.prototype = {
bind: function() {
console.log('gallery loaded');
var self = this;
this.setActive(1);
this.controller.on('click', _.bind(this.slideNext, this));
},
slideNext: function(ev) {
var i = $(ev.currentTarget).attr(this.options.link);
this.setActive(i);
},
setActive: function(index) {
var self = this;
this.currentActive = index;
this.controller.removeClass(this.states.active).filter(function() {
return $(this).attr(self.options.link) == index;
}).addClass(self.states.active);
}
};
return def;
}
(jQuery, _, app);
</script>
</body>
</html>You can try these four questions Copy/Pasting in this text box and then press
add textButton. Then see
Question-1 : The color of the sky is...?
Question-2 : Paper comes from...?
Question-3 : How many hours in a day?
Question-4 : A Giraffe is a fish?
Anybody Expert form stackoverflow community can solve this issue. What's the problem am making here.
By the way , Thanks in Advance and Love You.