GoreSlider is a basic image slider compatible with IE6. It requires jQuery.
See an example online : http://git.petegore.fr/goreslider/example
GoreSlider can create a slider using basic div tags, or table tag for better IE compatibility. Just create a container and put your pictures on it.
Don't forget to the IE6 compatibily stylesheet with conditional comments.
<link rel="stylesheet" href="../css/goreslider.css"/>
<!--[if lte IE 8]>
<link rel="stylesheet" href="{{ asset('./css/goreslider-ie6.css') }}">
<![endif]-->Load the GoreSlider Javascript main file and the jQuery one if you don't use it in your application :
<script src="../js/jquery.js"></script>
<script src="../js/goreslider.js"></script>GoreSlider needs a div to insert the slider. This div should have a parent element with a given width, or the slider width will be 100% of the page. Check the example for further information.
<div class="slider-container" style="width:800px">
<div id="my-table-slider">
<img src="pictures/picture_1.jpg"/>
<img src="pictures/picture_2.jpg"/>
<img src="pictures/picture_3.jpg"/>
</div>
</div>A simple call on the element you want to "goreslide".
$('#operation-slider img').hide(); // Hiding images during their load
$(window).load(function(){
$('#operation-slider').goreslider({
// Params
});
});Let's have a look at the different options you can use through an example. Here are the default options :
$(window).load(function(){
$('#operation-slider').goreslider({
hideMePlease: true, // Hide the image during their load before the slider is ready
auto: true, // Autorun one loaded
autoPause: true, // Autostop when mouse hover
speedStrip: 500, // Transition duration between pictures
maxWidth: "auto", // Slider maximal width ; if auto it will use the parent width
maxPicturesWidth: 600, // Max picture width inside the slider
maxHeight: 450, // Max picture height inside the slider
picturesPadding: 5, // Padding between picture and its border
sliderDelay: 3000, // Delay between each picture
controlNavigation: true, // Display or not the control thumbnails at the bottom
table: false // Table mode or div mode
});
});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent