Can anyone help me to troubleshoot the following codes?
The elements are positioned correctly but the arrows do not change the image. Only Image 1 is shown and it seems to be stuck there.
Thanks in advance!
HTML
<div class="carousel-wrapper">
<span id="target-item-1"></span>
<span id="target-item-2"></span>
<span id="target-item-3"></span>
<!-- Start carousel items-->
<div class="carousel-item item-1">
<a class="arrow arrow-prev" href="#target-item-3"></a>
<a class="arrow arrow-next" href="#target-item-2"></a>
</div>
<div class="carousel-item item-2">
<a class="arrow arrow-prev" href="#target-item-1"></a>
<a class="arrow arrow-next" href="#target-item-3"></a>
</div>
<div class="carousel-item item-3">
<a class="arrow arrow-prev" href="#target-item-2"></a>
<a class="arrow arrow-next" href="#target-item-1"></a>
</div>
</div>
CSS (leaving only the crucial parts)
.carousel-wrapper .carousel-item {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 25px 50px;
opacity: 0;
transition: all 0.5s ease-in-out;
border-radius: 10px;
}
.carousel-wrapper [id^="target-item"] {
display: none;
}
.carousel-wrapper *:target ~ .item-1 {
opacity: 0;
}
.carousel-wrapper #target-item-1:target ~ .item-1 {
opacity: 1;
}
.carousel-wrapper #target-item-2:target ~ .item-2, .carousel-wrapper #target-item-3:target ~ .item-3 {
z-index: 3;
opacity: 1;
}
Do advise if there is a better way to implement a responsive image slider (with arrows) that does not require javascript. Been searching for hours for a lightweight solution that is easy to implement.
Related
I'm trying to create a carousel similar to the picture...
Text on the side which alternates sides on each slide - if that makes sense?
I'm currently trying to use a Row and Two Col's in Boostrap but a bit puzzled.
Sorry for being a newb!
Thanks in advance for any help - any pointers or suggestions and I'll try and watch a video on making it happen. Just a bit unsure what is the best route?
--
enter image description here
This is my current code:
<section id="work">
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/WA.JPG" class="d-block w-88" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="images/TIC.JPG" class="d-block w-88" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="Images/yuriy-kovalev-RGK5GDJ907U-unsplash.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
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}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* 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}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
.sildetext-area h5 {
font-size: 21px;
margin: 10px 0;
}
.text {
display: none;
}
.sildetext-area {
position: absolute;
right: 0;
top: 0;
}
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="https://i.stack.imgur.com/nBbvt.png" style="width:50%">
<div class="sildetext-area">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="https://i.stack.imgur.com/nBbvt.png" style="width:50%">
<div class="sildetext-area">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="https://i.stack.imgur.com/nBbvt.png" style="width:50%">
<div class="sildetext-area">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<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>
Please see the snippet here I create a slider with your image.
The proprety of the #toggle (div) should be cursor:pointer and the toggle should appear from 0 to - 877px (screen - width).
Toggle works, it appears from 0 to 877px , also the cursor:pointer property does work ranging from 427px width to 877px width. But from min - 426px, the `cursor:pointer doesn't work.
What is the issue?`
My code:
#toggle {
float: right;
width: 25px;
height: 25px;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 10%;
visibility: hidden;
cursor: pointer;
}
#toggle .line {
width: 100%;
height: 3px;
background-color: #000;
margin: 3px auto;
}
#toggle.on #one {
transform: rotate(45deg) translateX(1px) translateY(5px);
}
#toggle.on #two {
opacity: 0;
}
#toggle.on #three {
transform: rotate(-45deg) translateX(5px) translateY(-9px);
}
#media screen and (max-width: 877px) {
ul {
display: none;
}
#toggle {
visibility: visible;
opacity: 1;
cursor: pointer;
}
}
<nav>
<div id="wrapper">
<div id="toggle">
<div id="one" class="line"> </div>
<div id="two" class="line"> </div>
<div id="third" class="line"> </div>
</div>
<div class="logo">
<h2> Navbar </h2>
</div>
<ul>
<li> Home </li>
<li> About </li>
<li> Pricings </li>
<li> Blog </li>
<li> Contact </li>
</ul>
</div>
</nav>
<div id="#content">
</div>
Hi I have the following css- html slideshow with controls but I would like to add the autoplay function too. Is it possible? I tried with javascript but I didn t have luck. I would like to leave the arrows and get rid of the bullets underneath.
<div class="slideshow-container">
<div class="mySlides fade">
<img src="lara_zizektours.jpg" name="slide" alt="" style="width:100%">
</div>
<div class="mySlides fade">
<img src="tremor_zizektours.jpg" name="slide" alt="" style="width:100%">
</div>
<div class="mySlides fade">
<img src="femina_zizektours.jpg" name="slide" alt="" style="width:100%">
</div>
<div class="mySlides fade">
<img src="kingcoya_zizektours.jpg" name="slide" alt="" style="width:100%">
</div>
<div class="mySlides fade">
<img src="sofia_zizektours.jpg" name="slide" alt="" style="width:100%">
</div>
<div class="mySlides fade">
<img src="1_zizektours.jpg" alt="" name="slide" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<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>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
<span class="dot" onclick="currentSlide(6)"></span>
</div>
/* SLIDESHOW CONTAINER */
.slideshow-container {
max-width: 2000px;
position: relative;
margin: 0px;
}
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: yellow;
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;
}
/* The dots/bullets/indicators */
.dot {
cursor:pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: yellow;
}
/* 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}
}
Assuming your slideshow works now (you didn't post the javascript) you can set a simple setInterval and trigger click() on one of your arrow keys.
I added an ID to each of the arrows so it's easier to target in javascript. And I added a plusSlides() function here just to console.log the event triggering - you don't need that since you should already have it in your code.
var next = document.getElementById('next'),
seconds = 3;
var interval = setInterval(function() {
next.click();
}, (seconds * 1000))
/* you don't need this function - just for the demo */
function plusSlides(val) {
console.log(val);
}
<a class="prev" id="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" id="next" onclick="plusSlides(1)">❯</a>
https://www.w3schools.com/w3css/w3css_slideshow.asp provides an answer under the heading Automatic slideshow. You can compare with and reuse their codes and scripts.
I am trying to replicate this hover effect but I'm even sure where to start to be honest.
Here is my HTML code:
<div class="row">
<div class="col-sm-4 portfolio-item">
<a href="#" class="thumbnail">
<img src="img/portfolio/cabin.png">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#" class="thumbnail">
<img src="img/portfolio/game.png">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#" class="thumbnail">
<img src="img/portfolio/circus.png">
</a>
</div>
CSS: (all I have)
#portfolio .portfolio-item {
background-color: #18BC9C;
transition: all ease .5s;
-webkit-transition: all ease .5s;
}
#portfolio .portfolio-item:hover {
}
I don't even know where to begin. I think I need to fix something with the z-index and opacity but I don't know where to adjust it, and I'm also not sure where to put the transition effect. Everything I've tried has not worked so if someone could show me how to achieve that hover effect from a clean slate that would be greatly appreciated.
Hi this will get you started. First create an overlay opacity 0, then write a little jQuery so that on hover a class is applied opacity 1 with an rgba (rgb with opacity) and a css transition.
See the code for more, and run with this if you like I've separated the overlay from the image so you have control of them both:
$( document ).ready(function() {
$( '.portfolio-item' )
.mouseover(function() {
$( this ).find( '.overlay' ).addClass( 'show' );
})
.mouseout(function() {
$( this ).find( '.overlay' ).removeClass( 'show' );
});
});
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.col-sm-4 {
float: left;
width: 33%;
position: relative;
}
img {
width: 100%;
display: block;
}
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(145,0,0,0.5);
z-index: 2;
width: 100%;
height: auto;
opacity: 0;
-webkit-transition: .3s ease-in opacity;
-moz-transition: .3s ease-in opacity;
transition: .3s ease-in opacity;
}
.overlay.show {
opacity: 1;
}
.overlay.show:after {
content: 'x';
color: white;
position: absolute;
left: 50%;
margin-right: -50%;
top: 50%;
transform: translateY(-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
<div class="col-sm-4 portfolio-item">
<div class="overlay"></div>
<a href="#" class="thumbnail">
<img src="http://placehold.it/100x50">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<div class="overlay"></div>
<a href="#" class="thumbnail">
<img src="http://placehold.it/100x50">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<div class="overlay"></div>
<a href="#" class="thumbnail">
<img src="http://placehold.it/100x50">
</a>
</div>
You can use a pseudo element ::after to create an overlay. Just use opacity: 0; to hide it, and show it on hover: opacity: 0.6;. As transition you can use: transition: opacity ease .5s;.
This way, you can create an color overlay over every image (would not be possible with only using background on the parent element). To create the magnifying glass, you can either use a <span> inside the <a> tag, or the other pseudo element ::before.
.portfolio-item a {
position: relative;
}
.portfolio-item a::after {
position: absolute;
top: 0;
left: 0;
content: "";
width: 100%;
height: 100%;
background: #457647;
opacity: 0;
transition: opacity ease .5s;
}
.portfolio-item a:hover::after {
opacity: 0.6;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-sm-4 portfolio-item">
<a href="#" class="thumbnail">
<img src="//placehold.it/200x100/fff">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#" class="thumbnail">
<img src="//placehold.it/200x100/fff">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#" class="thumbnail">
<img src="//placehold.it/200x100/fff">
</a>
</div>
</div>
Of course you have to use vendor prefixes for older browsers. Also make sure that your markup is valid - a closing div tag was missing.
I have an side navigation bar which toggles to hide and show on each click in the sidebar(contains a list links). And a iframe where i am displaying a website. when i click on a link it will hide the side bar and redirects it to corresponding url within the iframe area. The problem is in when i am displaying some websites inside iframe the links of that redirected websites will only work in top half portion of iframe and remaining in remaining half portion of iframe links are disabled. when i scroll inside iframe i.e when link in bottom half comes to top portion the links are enabled. Need help.
.menu_sample {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100px;
border: solid 1px;
transition: transform 0.1s ease-out;
}
.content {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
padding: 10px;
transition: left 1s ease-out;
margin-left: -1.5%;
margin-top: 150%;
}
/*transition*/
.top_mar {
margin-top: 25%;
}
/* on toggle*/
.content.pushed {
left: 225px;
}
.hide {
transform:translateX( -100px);
}
<div class="menu_sample top_mar">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li><span style="color:blue; font-weight:bold;">Dashboards</span></li>
{% for Dashboard in dashboards %}
<li>{{ Dashboard.d_name }}</li>
{% endfor %}
</ul>
</div>
</div>
<div class="content pushed top_mar">
<button onclick="toggleMenu()"><span id="menu-button"><span class="glyphicon glyphicon-chevron-left" id="glymphi" style="margin-left:24%;"></span></span></button>
</div>
<div style="margin-left:-1%; margin-top:3.5%; height: 625px;" >
<iframe width="100%" height="95%" name="iframe_a" frameborder="0"></iframe>
</div>
.menu_sample {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100px;
border: solid 1px;
transition: transform 0.1s ease-out;
}
.content {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
padding: 10px;
transition: left 1s ease-out;
margin-left: -1.5%;
margin-top: 150%;
}
/*transition*/
.top_mar {
margin-top: 25%;
}
/* on toggle*/
.content.pushed {
left: 225px;
}
.hide {
transform:translateX( -100px);
}
<div class="menu_sample top_mar">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li><span style="color:blue; font-weight:bold;">Dashboards</span></li>
<li>Link</li>
<li>Link</li><li>Link</li>
</ul>
</div>
</div>
<div class="content pushed top_mar" style="display:none">
<button onclick="toggleMenu()"><span id="menu-button"><span class="glyphicon glyphicon-chevron-left" id="glymphi" style="margin-left:24%;"></span></span></button>
</div>
<div style="margin-left:-1%; margin-top:3.5%; height: 625px;" >
<iframe width="100%" height="95%" name="iframe_a" frameborder="0" src="http://en.wikipedia.org/wiki/Help:Link"></iframe>
</div>
Your main problem is the <div class="content pushed top_mar">. Pls check the attached screenshot. This div is overlapping over your iframe that's why links are not working in that region. The links above the div works as the upper portion is not covered by the div.
I'm not sure what is the purpose of the div for your application. If I set display:none all the links inside the iframe are clickable.