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.