Open Slide Carousel - Add Your Website an GNU Slideshow
<link rel="stylesheet" title="style_OpenSlideCarousel" type="text/css" href="style\style_osc.css"> <script src="script/osc.js"></script>
Here you can Set height/width in CSS
<div class="content-box"> </div> With arguments:
- id="choose somting unique"
- class="carousel-items"
- data-viewSize="3" (optional)
- data-loop="false" (optional)
- data-alignment="left" (optional)
- data-ratio="0:0" (optional)
<div id="YOURSlide" class="carousel-items" data-viewSize="3" data-loop="false"> </div> <div class="item"> <!--put your stuff inside --> </div> You can use also other html tags with class="item".
<a href="https://www.google.com" class="item"> <!--put your stuff inside --> </a> With arguments:
- class="prev nav"
- role="button"
- onclick="onClickHandler(this, -1)
<div class="prev nav" role="button" onclick="onClickHandler(this, -1)"> ❮ </div> With arguments:
- class="next nav"
- role="button"
- onclick="onClickHandler(this, 1)
<div class="next nav" role="button" onclick="onClickHandler(this, 1)"> ❯ </div> <script> init("YOURSlide"); </script> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Open Slide Carousel</title> <link rel="stylesheet" title="style_OpenSlideCarousel" type="text/css" href="style\style_osc.css"> <script src="script/osc.js"></script> </head> <body> <div class="content-box"> <div id="YOURSlide" class="carousel-items" data-viewSize="3" data-loop="false"> <div class="item"> <p>0</p> <!--put your stuff inside --> </div> <div class="item"> <p>1</p> <!--put your stuff inside --> </div> <!--...--> </div> <div class="prev nav" role="button" onclick="onClickHandler(this, -1)">❮</div> <div class="next nav" role="button" onclick="onClickHandler(this, 1)">❯</div> </div> <script> init("YOURSlide"); </script> </body> </html> Contains the index of the item currently displayed in the first position.
Accepts positive numbers including 0.
If not specified, the value 0 is assigned.
Decides whether the items are in a loop and at the end the first item is displayed again.
To get a loop: 1, true, "1", "true", "True", "TRUE"
That it is not a loop: 0, false, "0", "false", "False", "FALSE"
If not specified, the value "false" is assigned.
How many items can be displayed next to each other.
Accepts positive numbers and 0 whereby this counts as not set. It is also possible to specify "auto".
If not specified, the value "auto" is assigned. This is overwritten during the initialization.
If the value 0 or "auto" is assigned it is set automatically depending on data-ratio or the width of the content-box element and the width of the item elements. Height of the element manuell set in style CSS, if not set to height of content-box element. Positive numbers change the width of the item depending on the content-box element. Height set by data-ratio, with no data-ratio manuell set in style CSS or automatically get height of content-box element.
Ration of item width to item height.
When formatting, the front number indicates the width, which is separated by a ":" from the second number, which stands for the height. The numbers are only a ratio, not the true width or height. Only accepts positive numbers. Also 0 whereby this counts as not set.
If not specified, the value "0:0" is assigned.
If the ratio "0:0" is set then the ratio is ignored. If a ratio is specified and data-viewSize is set to auto, the width is adapted to the height. If data-viewSize has a fixed value, the height is adapted to the width.
At which position the first index is displayed.
To position on the left: "left", "Left", "LEFT", "l", "L"
To position on the right: "right", "Right", "RIGHT", "r", "R"
If not specified, the value "left" is assigned.