Simple RAW JavaScript popup slider. Based on https://codepen.io/gabrieleromanato/pen/pIfoD
Russian documentation is available here - http://cccp-blog.com/koding/js-slajder
Some features are commented in the code:
- load the slider to the container with id
popupSlider
; - closing the popup clicking outside;
- make the carousel (auto slide changing with interval 5 seconds) - stop when the slide was changed manually.
- Copy the catalog to the site directory.
- Add the next line to the HTML code of your site before the closed
body
tag:
<script type="text/javascript" src="/path_to_slider_dir/popupSlider.js"></script>
- Add the following code into your existing JavaScript file for calling the slider (it may be the button press, documentReady or other action):
var aSlider = new Slider("#slider");
If you want to attach the slider to the specified container, you should add the id #popupSlider to it:
<div id="popupSlider"></div>
Also you can change the value of the id in the code of the popupSlider.js and you should add this section to the loadStatic()
method:
var target = document.querySelector( "#popupSlider" );
target.innerHTML = sliderHTML;
You should add this code instead of the following:
var div = document.createElement('div');
div.innerHTML = sliderHTML;
document.body.appendChild(div);
- Add your pictures to the slides folder
- Add new HTML block to the slider wrapper with id
slider-wrapper
:
<div class="slide">
<img src="slides/new_slide.jpg" alt="" />
<div class="caption">
<div class="caption-container">
Text
</div>
</div>
</div>
- Add new item to the block with id
slider-nav
:
<a href="#" data-slide="id"></a>
Use the value of the data-slide
greater then the largest at the current moment.
- make the external config file;
- change the makeup for the situations when the slider would be embedded;
- asynchronous slider loading;
- make an npm package;
- responsize makeup;
- swipe for mobile devices.