I have several problems, the first one: when you hover over the marker, the video is not displayed on mobile devices, I just see a black square and that's it.
The second problem is that I am unable to stretch the a-video to the full width of the marker and position it in the center.
Thank you all in advance!
My code:
<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe#1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
<script>
window.onload = function() {
AFRAME.registerComponent("videohandler", {
init: function() {
var marker = this.el;
this.vid = document.querySelector("#vid");
this.vid.pause();
marker.addEventListener(
"markerFound",
function() {
this.vid.play();
}.bind(this)
);
marker.addEventListener(
"markerLost",
function() {
this.vid.pause();
this.vid.currentTime = 0;
}.bind(this)
);
}
});
};
</script>
<style>
.arjs-loader {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.arjs-loader div {
text-align: center;
font-size: 1.25em;
color: white;
}
</style>
<body style="margin : 0px; overflow: hidden;">
<div class="arjs-loader">
<div>Loading, please wait...</div>
</div>
<a-scene
vr-mode-ui="enabled: false;"
renderer="antialias: true; alpha: true; precision: mediump;"
arjs="trackingMethod: best; sourceType: webcam; debugUIEnabled: false;"
>
<a-assets>
<video
src="https://cdn.glitch.com/8383ce4d-10be-4440-a143-97d71674e0a3%2FHARU%20%E2%80%93%20%D0%92%D0%9A%D0%98%D0%9D%D0%9E%20(Mood%20Video).mp4?v=1630088605215"
preload="auto"
id="vid"
response-type="arraybuffer"
loop
crossorigin
webkit-playsinline
autoplay
playsinline
></video>
</a-assets>
<a-nft
videohandler
type="nft"
class="nft"
url="https://cdn.glitch.com/8383ce4d-10be-4440-a143-97d71674e0a3%2Fnar"
smooth="true"
smoothcount="10"
smoothtolerance="0.01"
smooththreshold="5"
raycaster="objects: .clickable"
>
<a-video
src="#vid"
scale="1 1 1"
position="0 0.1 0"
rotation="-90 0 0"
class="clickable"
gesture-handler
width="208"
height="208"
>
</a-video>
</a-nft>
<a-entity camera></a-entity>
</a-scene>
</body>
Related
const menu = document.querySelector(".mini-menu");
menu.addEventListener("click", () => menu.classList.toggle("opened"));
html, body
{
width: 100%;
height: 100%;
margin: 0;
}
.container
{
display: flex;
width: 100%;
height: 100%;
background: #47b6e04a;
justify-content: center;
align-items: center;
}
.mini-menu
{
cursor: pointer;
transition: all .4s linear;
}
.line
{
transition: all .4s linear;
transform-origin: center;
}
.mini-menu.opened
{
transform: rotate(45deg);
}
.mini-menu.opened .line_top
{
transform: translateY(24px);
}
.mini-menu.opened .line_mid
{
transform: rotate(-90deg);
}
.mini-menu.opened .line_bottom
{
transform: translateY(-24px);
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" width=80 height=80 stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="mini-menu">
<line x1="6" y1="16" x2="74" y2="16" class="line line_top"></line>
<line x1="6" y1="40" x2="74" y2="40" class="line line_mid"></line>
<line x1="6" y1="64" x2="74" y2="64" class="line line_bottom"></line>
</svg>
</div>
Click on menu-burger - transition becomes. It works correctly in desktop Google Chrome, but in Chrome on Android transition of top and bottom lines for translateY isn't shown, at the end it just "jumps" to final state. Does anyone know what's here the problem, and is there a way to fix it? Big thanks!
So, it seems the problem was in translating SVG. Just changed code, and it works smoothly now.
const menu = document.querySelector(".mini-menu");
menu.addEventListener("click", () => menu.classList.toggle("opened"));
html, body
{
width: 100%;
height: 100%;
margin: 0;
}
.container
{
display: flex;
width: 100%;
height: 100%;
background: #47b6e04a;
justify-content: center;
align-items: center;
}
.mini-menu
{
display: flex;
flex-direction: column;
width: 70px;
height: 92px;
cursor: pointer;
transition: all .4s linear;
}
.line
{
margin-bottom: 20px;
width: 100%;
height: 4px;
background: #000;
transition: all .4s linear;
}
.line_top
{
margin-top: 20px;
}
.line_bottom
{
margin-bottom: 0;
}
.mini-menu.opened
{
transform: rotate(45deg);
}
.mini-menu.opened .line_top
{
transform: translateY(24px);
}
.mini-menu.opened .line_mid
{
transform: rotate(-90deg);
}
.mini-menu.opened .line_bottom
{
transform: translateY(-24px);
}
<div class="container">
<div class="mini-menu">
<div class="line line_top"></div>
<div class="line line_mid"></div>
<div class="line line_bottom"></div>
</div>
</div>
I want to set the initial position of the image as centered how can I do that? I don't want to do CSS centering as it will be applied always only at the first time I want the position to be set as centered of the container.
I need to keep the style #scene {display: inline-block;} or else the panning inside bounds breaks.
How can I center this image at load initially
const element = document.querySelector('#scene');
let panZoomController = panzoom(element, {
bounds: true,
boundsPadding: 0.1
});
.image-outer-wrapper {
border: 3px solid red;
overflow: hidden;
height: 500px;
}
img {
cursor: move;
display: flex;
justify-content: center;
}
#scene {
display: inline-block;
}
<script src="https://unpkg.com/panzoom#8.1.0/dist/panzoom.js"></script>
<div class="image-outer-wrapper">
<div id="scene">
<img src="https://www.probytes.net/wp-content/uploads/2018/01/5-1.png">
</div>
</div>
Found out a move to function Thanks to #Temani Afif for help
let element = document.querySelector('#scene');
var s = (document.querySelector('.image-outer-wrapper').offsetWidth /2) - (element.offsetWidth / 2);
let panZoomController = panzoom(element, {
bounds: true,
boundsPadding: 0.1
});
panZoomController.moveTo(s, 0);
.image-outer-wrapper {
border: 3px solid red;
overflow: hidden;
height: 300px;
}
img {
cursor: move;
}
#scene {
display: inline-block;
}
<script src="https://unpkg.com/panzoom#8.1.0/dist/panzoom.js"></script>
<div class="image-outer-wrapper">
<div id="scene">
<img src="https://www.probytes.net/wp-content/uploads/2018/01/5-1.png">
</div>
</div>
You can use zoomAbs to set the initial position. The scale need to be different from 1 (not sure why) so I made it 0.9
let element = document.querySelector('#scene');
var s = (document.querySelector('.image-outer-wrapper').offsetWidth - element.offsetWidth) ;
let panZoomController = panzoom(element, {
bounds: true,
boundsPadding: 0.1
}).zoomAbs(
6*s, // initial x position
0, // initial y position
0.9 // initial zoom
);
.image-outer-wrapper {
border: 3px solid red;
overflow: hidden;
height: 300px;
}
img {
cursor: move;
}
#scene {
display: inline-block;
}
<script src="https://unpkg.com/panzoom#8.1.0/dist/panzoom.js"></script>
<div class="image-outer-wrapper">
<div id="scene">
<img src="https://www.probytes.net/wp-content/uploads/2018/01/5-1.png">
</div>
</div>
Here:
<style>
.image-outer-wrapper {
border: 3px solid red;
overflow: hidden;
height: 500px;
}
img {
cursor: move;
}
#scene {
display: flex;
justify-content: center;
}
</style>
<div class="image-outer-wrapper">
<div id="scene">
<img src="https://www.probytes.net/wp-content/uploads/2018/01/5-1.png">
</div>
</div>
Try this
<style>
.image-outer-wrapper {
border: 3px solid red;
overflow: hidden;
height: 500px;
}
img {
cursor: move;
width: 100%;
}
#scene {
position: absolute;
width:400px;
left: 50%;
margin-left:-200px;
display:block;
}
</style>
<div class="image-outer-wrapper">
<div id="scene">
<img src="https://www.probytes.net/wp-content/uploads/2018/01/5-1.png">
</div>
</div>
This will center the img inside its container :
#scene {
display: flex;
justify-content: center;
}
I am loading an external CSS file using JS. For my radio buttons, I am running a transition animation, but its loading is delayed on page load, and I can't figure out why.
Note: since this issue only occurs on page load, the most effective way to reproduce might be to copy the html & css files, and run locally. Simply running the code snippet won't show the issue. You should notice that the male and female divs animate into shape, rather than just appear immediately when the page loads.
To see desired behavior, import the css directly into the head of the html file (rather than import using JS). You'll notice that the gender divs appear instantly, without animation.
Here's a gif of what it's currently doing that I don't want: https://media.giphy.com/media/8BksF1okeQfNyv7ZCh/giphy.gif
const genderCss = document.createElement('link')
genderCss.rel = "stylesheet"
genderCss.href = "demo.css"
genderCss.type = "text/css"
document.head.appendChild(genderCss)
*,
*:before,
*:after {
box-sizing: border-box;
}
.col-half {
padding-right: 0;
float: left;
width: 100%;
}
.col-half:last-of-type {
padding-right: 0;
}
.registrationContainer {
justify-content: center;
align-items: center;
margin: 10rem auto;
background: white;
padding: 20px 25px;
border: 5px solid #337ab7;
border-radius: 6px;
width: 550px;
height: auto;
box-sizing: border-box;
}
.gender-input-group {
margin-bottom: 1em;
padding: 0;
zoom: 1;
width: 100%;
}
.gender-input-group:before,
.gender-input-group:after {
content: "";
display: table;
}
.gender-input-group:after {
clear: both;
}
input[type="radio"] + label,
select option,
select {
width: 30%;
text-align: center;
padding: 1em;
line-height: 1.4;
background-color: #f9f9f9;
border: 1px solid #e5e5e5;
border-radius: 3px;
/* The problem seems to be here */
-webkit-transition: 0.35s ease-in-out;
-moz-transition: 0.35s ease-in-out;
-o-transition: 0.35s ease-in-out;
transition: 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
input[type="radio"]:checked + label,
input:checked + label:before,
select:focus,
select:active {
background-color: #7ed321;
color: #fff;
border-color: #64ac15;
}
select {
display: inline-block;
width: 50%;
text-align: center;
float: left;
border-radius: 0;
}
input[type="radio"] + label:first-of-type {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
input[type="radio"] {
display: none;
box-sizing: border-box;
padding: 0;
}
input[type="checkbox"] + label:before {
position: absolute;
top: 0.2em;
left: 0;
display: block;
width: 1em;
height: 1em;
padding: 0;
content: "";
}
input[type="checkbox"] + label:after {
position: absolute;
top: 0.45em;
left: 0.2em;
font-size: 0.8em;
color: #fff;
opacity: 0;
font-family: FontAwesome;
content: "\f00c";
}
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous"
>
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous">
</script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous">
</script>
<script type="text/javascript">
const css = document.createElement('link')
css.rel = "stylesheet"
css.href = "demo.css"
css.type = "text/css"
document.head.appendChild(css)
</script>
</head>
<body>
<div class="col-half">
<h5>Gender</h5>
<div class="gender-input-group">
<input
id="male"
type="radio"
name="gender"
value="male"
>
<label for="male">Male</label>
<input
id="female"
type="radio"
name="gender"
value="female"
>
<label for="female">Female</label>
</div>
</div>
</body>
</html>
I'm running into difficulties with Foundations Orbit slider on mobile and tablet views, when swiped with figure to the right the slides start to go then get a little stuck then they go to the next slide and so on, when swiped from right to left the slides and headline text get very messy, view website here: kids toy site
HTML
<div class="small-11 small-centered columns">
<ul class="orbit-content" data-orbit>
<li data-orbit-slide="headline-1">
<div class="large-5 medium-11 small-12 right columns insliderbox">
<h3>jigsaws</h3>
<p>New jigsaws in stock. Colourful animal shapes designed to teach children numbers and the alphabet.</p>
<a class="button slider-btn left" href="http://kawaii-1.hksn.co.uk/tales-by-tigerlily/featured-news/featured-news-test-post-three/" title="jigsaws">Click to find out more</a>
</div>
<img src="http://kawaii-1.hksn.co.uk/wp-content/uploads/2014/09/Kawaii-Slider_02.jpg" alt="slide image" />
</li>
<li data-orbit-slide="headline-1">
<div class="large-5 medium-11 small-12 right columns insliderbox">
<h3>String Dolls</h3>
<p>String Dolls first appeared in Thailand over a decade ago. Since then they have been slowly making their way around the world.</p>
<a class="button slider-btn left" href="http://kawaii-1.hksn.co.uk/tales-by-tigerlily/featured-news/featured-news-test-post-two/" title="String Dolls">Click to find out more</a>
</div>
<img src="http://kawaii-1.hksn.co.uk/wp-content/uploads/2014/09/Kawaii_slide01.jpg" alt="slide image" />
</li>
<li data-orbit-slide="headline-1">
<div class="large-5 medium-11 small-12 right columns insliderbox">
<h3>Socky Dolls</h3>
<p>Socky Dolls are a collectable range of heatable soft toys, made from real sock materials!</p>
<a class="button slider-btn left" href="http://kawaii-1.hksn.co.uk/tales-by-tigerlily/featured-news/featured-news-test-post-one/" title="Socky Dolls">Click to find out more</a>
</div>
<img src="http://kawaii-1.hksn.co.uk/wp-content/uploads/2014/09/Kawaii-Slider_03.jpg" alt="slide image" />
</li>
</ul>
</div>
</div>
CSS
.content-slider h3 {
font-weight: 700;
line-height: 1.1;
}
.content-slider {
position: relative;
}
.orbit-slide-number, .orbit-timer {
display: none;
}
.orbit-bullets-container {
position: relative;
z-index: 10;
}
.orbit-bullets li {
background: none repeat scroll 0 0 #f1f1f1;
}
.orbit-slides-container li {
position: relative;
z-index: 10;
}
.orbit-slides-container li div {
padding: 2em 50px;
position: relative;
top: 4.5em;
z-index: 10;
}
.orbit-slides-container li img {
left: 0;
position: absolute;
top: 0;
z-index: 0;
}
.orbit-container .orbit-slides-container img {
display: block;
max-width: 1282px;
max-height: 432px;
}
.orbit-container .orbit-slides-container > * {
height: 432px !important;
}
.orbit-container {
min-height: 432px;
}
.insliderbox {
background-color: rgba(240, 142, 10, 0.8);
margin: 0 42px 0 0;
}
.insliderbox h3 {
font-size: 2.2em;
}
#media screen and (min-width: 40.063em) and (max-width: 64.063em) {
.insliderbox h3 {
font-size: 1.8em;
}
.insliderbox {
margin: 0 4% 0 0;
}
}
#media screen and (max-width: 40.063em) {
.content-slider {
width: 100% !important;
}
.insliderbox h3 {
font-size: 1em;
}
.insliderbox p {
font-size: 0.8em;
}
.insliderbox {
padding: 5px 10px 1px !important;
}
.orbit-container .orbit-slides-container img {
display: block;
max-height: 212px;
}
.insliderbox {
margin: 0;
}
}
.orbit-prev {
background: url("../images/sprite-sheet.png") no-repeat scroll 2px -375px rgba(0, 0, 0, 0);
}
.orbit-prev:hover {
background: url("../images/sprite-sheet.png") no-repeat scroll 2px -454px rgba(0, 0, 0, 0);
}
.orbit-next {
background: url("../images/sprite-sheet.png") no-repeat scroll -9px -295px rgba(0, 0, 0, 0);
}
.orbit-next:hover {
background: url("../images/sprite-sheet.png") no-repeat scroll -9px -220px rgba(0, 0, 0, 0);
}
.orbit-container .orbit-next:hover,
.orbit-container .orbit-prev:hover,
.orbit-container .orbit-prev span,
.orbit-container .orbit-next span {
background-color: rgba(0, 0, 0, 0);
border: none;
}
.orbit-container .orbit-prev, .orbit-container .orbit-next {
margin-top: 17px;
width: 50px;
top: 35%;
}
.orbit-container {
overflow: visible !important;
}
.orbit-slides-container {
overflow: hidden !important;
}
.orbit-container .orbit-prev {
margin-left: -5%;
}
.orbit-container .orbit-next {
margin-right: -5%;
}
.content-slider, .content-slider h3 {
color: #fff;
}
#media screen and (max-width:40.063em) {
.orbit-slides-container li div {
padding: 2em 0;
}
.orbit-next, .orbit-prev {
display: none;
}
}
#media screen and (min-width:768px) and (max-width:1024px) {
.orbit-slides-container li div {
top: 11.5em;
}
button, .button.slider-btn {
position: relative;
bottom: 1.1em;
}
}
#media screen and (min-width:741px) and (max-width:768px) {
.orbit-slides-container li div {
top: 10em;
}
button, .button.slider-btn {
position: relative;
bottom: 1.1em;
}
}
#media screen and (min-width:600px) and (max-width:741px) {
.orbit-slides-container li div {
top: 11em;
}
button, .button.slider-btn {
position: relative;
bottom: 1.5em;
}
}
#media screen and (min-width:458px) and (max-width:600px) {
.orbit-slides-container li div {
top: 9em;
}
button, .button.slider-btn {
position: relative;
bottom: 1.5em;
}
}
#media screen and (max-width:458px) {
.orbit-slides-container li div {
top: 13.23em;
}
button, .button.slider-btn {
font-size: 0.3rem;
float: left !important;
margin: -19px 0 12px;
}
.content-slider:after {
margin-top: -65px !important;
}
}
JS
$(document).foundation('section').foundation('orbit', {
timer_speed: 3000,
animation_speed: 400,
stack_on_small: false,
navigation_arrows: true,
slide_number: false,
pause_on_hover: false,
resume_on_mouseout: false,
timer: false,
variable_height: false,
});
I have tried taking away the JS, the CSS nothing changes and I have tried copying pasting HTML directly from the Zurb Foundation Orbit webpage, no change, it is a Wordpress site so I took down all the plugins...no change? Kinda stuck, any ideas most welcome.
Thanks
I am making a website with some screenshots of an iPhone app I made and was wondering if there was some kind of slideshow thing for HTML. I want it to have the iPhone frame and the slideshow with the screenshots in the middle of it. I would prefer it to be written in something other than flash.
Thanks in advance!
I'm a fan of the Nivo Slider, personally. Requires jQuery.
This needs HTML, CSS and Javascript. This is not my own answer but is derived from https://www.w3schools.com/howto/howto_js_slideshow.asp.
For a slideshow that will change picture on button click
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor:pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img1.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img2.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img3.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
For an automatic slideshow
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor:pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img1.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img2.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img3.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>