Skip to content

Instantly share code, notes, and snippets.

@mpampols

mpampols/index.html

Created August 28, 2016 21:34
Show Gist options
  • Save mpampols/9199f2499d7749ee1c0fc18db1cd46fd to your computer and use it in GitHub Desktop.
Save mpampols/9199f2499d7749ee1c0fc18db1cd46fd to your computer and use it in GitHub Desktop.
Download ZIP
Dynamically add new slides to a bxSlider instance
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bxSlider add slides dynamically</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.css" rel="stylesheet" />
</head>
<body>
<main role="main">
<ul class="bxslider">
<li><img src="https://placeholdit.imgix.net/~text?txtsize=61&amp;txt=650%C3%97350&amp;w=650&amp;h=350" /></li>
<li><img src="https://placeholdit.imgix.net/~text?txtsize=61&amp;txt=650%C3%97350&amp;w=650&amp;h=350" /></li>
<li><img src="https://placeholdit.imgix.net/~text?txtsize=61&amp;txt=650%C3%97350&amp;w=650&amp;h=350" /></li>
</ul>
<a id="add-slide" href="">add slide</a>
</main>
<script type="text/javascript">
$(document).ready(function(){
// get the slider instance
var sliderInstance = $('.bxslider').bxSlider();
$('#add-slide').click(function(e) {
e.preventDefault();
// add a new item to the slider
$('.bxslider').last().append('<li><img src="https://placeholdit.imgix.net/~text?txtsize=61&amp;txt=650%C3%97350&amp;w=650&amp;h=350" /></li>');
// get the current slide
var currentSlide = sliderInstance.getCurrentSlide();
// reload the instance
sliderInstance.reloadSlider({
startSlide: currentSlide,
});
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment