Tuesday 2 June 2020

CSS SLIDER WITH RADIO BUTTON

---------------------------------------------------------------------------------------------------------------------
πŸ…²πŸ†‚πŸ†‚ πŸ†‚πŸ…»πŸ…ΈπŸ…³πŸ…΄πŸ† πŸ††πŸ…ΈπŸ†ƒπŸ…· πŸ†πŸ…°πŸ…³πŸ…ΈπŸ…Ύ πŸ…±πŸ†„πŸ†ƒπŸ†ƒπŸ…ΎπŸ…½
https://www.w3schools.com/code/tryit.asp?filename=GFEAA5MEVWDG
https://textfancy.com/
https://freefrontend.com/css-text-effects/
https://uicookies.com/css-text-effects/
https://www.jqueryscript.net/blog/best-carousel.html
https://mobirise.com/bootstrap-carousel/vertical-carousel-slides.html
---------------------------------------------------------------------------------------------------------------------
<!-- https://www.cssscript.com/basic-pure-css-slideshow-carousel/ -->
<style>
.slider:nth-of-type(1):checked ~ .slide1:nth-of-type(1),
.slider:nth-of-type(2):checked ~ .slide1:nth-of-type(2),
.slider:nth-of-type(3):checked ~ .slide1:nth-of-type(3)
{
display: inline-block;
}
input[type=radio] {
display: none;
}
ul { text-align: center; }
li {
border: 3px solid #333;
list-style: none;
display: none;
}
img {
width: 800px;
height: 600px;
position: relative;
}
h2 {
position: absolute;
top: 250px;
color: #fff;
padding: 20px;
background-color: #000;
}
p {
font-size: x-large;
padding-left: 15%;
}
label {
background: black;
padding: 10px;
border-radius: 50%;
display: inline-block;
}
.selector { text-align: center; }
</style>
<body>
<ul>
<ul>
<input type="radio" name="slider" id="1" class="slider" checked>
<input type="radio" name="slider" id="2" class="slider">
<input type="radio" name="slider" id="3" class="slider">
<li class="slide1">
<img src="https://unsplash.it/800/600/?random">
<h2>Image 1</h2>
</li>
<li class="slide1">
<img src="https://unsplash.it/1024/768/?random">
<h2>Image 2</h2>
</li>
<li class="slide1">
<img src="https://unsplash.it/1800/1600/?random">
<h2>Image 3</h2>
</li>
</ul>
<div class="selector">
<label for="1"></label>
<label for="2"></label>
<label for="3"></label>
</div>
</ul>
</body>
---------------------------------------------------------------------------------------------------------------------
πŸŽ€π“’π“’π“’ π“’π“›π“˜π““π“”π“‘ π“¦π“˜π“£π“— 𝓛𝓐𝓑𝓔𝓛 π“‘π“€π“£π“£π“žπ“
---------------------------------------------------------------------------------------------------------------------
<!-- https://stackoverflow.com/questions/39589171/css3-slider-multiple-images -->
<style>
label{
cursor: pointer;
}
input[type='radio']{
display: none;
}
.slider{
position: relative;
}
.slide{
position: absolute;
top: 0; left: 0;
width: 200px; height: 200px;
background: no-repeat 50% 50% / cover;
}
.slide_1{
background-image: url(http://placekitten.com/g/200/300)
}
.slide_2{
background-image: url(http://placekitten.com/g/200/400)
}
.slide_3{
background-image: url(http://placekitten.com/g/200/150)
}
input:checked + .slide{
left: 210px;
}
input:checked + .slide + input + .slide{
left: 420px;
}
</style>
<body>
<label for="slide_1">label_1</label>
<label for="slide_2">label_2</label>
<label for="slide_3">label_3</label>
<div class="slider">
<input id="slide_1" type="radio" name="slide-changer" checked/>
<div class="slide slide_1"></div>
<input id="slide_2" type="radio" name="slide-changer" />
<div class="slide slide_2"></div>
<input id="slide_3" type="radio" name="slide-changer" />
<div class="slide slide_3"></div>
</div>
</body>
---------------------------------------------------------------------------------------------------------------------
SCROLL BAR AND BUTTON SLIDER
---------------------------------------------------------------------------------------------------------------------
<style>
* {
box-sizing: border-box;
}
.slider {
width: 300px;
text-align: center;
overflow: hidden;
}
.slides {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
/*
scroll-snap-points-x: repeat(300px);
scroll-snap-type: mandatory;
*/
}
.slides::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.slides::-webkit-scrollbar-thumb {
background: black;
border-radius: 10px;
}
.slides::-webkit-scrollbar-track {
background: transparent;
}
.slides > div {
scroll-snap-align: start;
flex-shrink: 0;
width: 300px;
height: 300px;
margin-right: 50px;
border-radius: 10px;
background: #eee;
transform-origin: center center;
transform: scale(1);
transition: transform 0.5s;
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-size: 100px;
}
.slides > div:target {
/*   transform: scale(0.8); */
}
.author-info {
background: rgba(0, 0, 0, 0.75);
color: white;
padding: 0.75rem;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
margin: 0;
}
.author-info a {
color: white;
}
img {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slider > a {
display: inline-flex;
width: 1.5rem;
height: 1.5rem;
background: white;
text-decoration: none;
align-items: center;
justify-content: center;
border-radius: 50%;
margin: 0 0 0.5rem 0;
position: relative;
}
.slider > a:active {
top: 1px;
}
.slider > a:focus {
background: #000;
}
/* Don't need button navigation */
@supports (scroll-snap-type) {
.slider > a {
display: none;
}
}
html, body {
height: 100%;
overflow: hidden;
}
body {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom, #74ABE2, #5563DE);
font-family: 'Ropa Sans', sans-serif;
}
</style>
<body>
<div class="slider">
<a href="#slide-1">1</a>
<a href="#slide-2">2</a>
<a href="#slide-3">3</a>
<a href="#slide-4">4</a>
<a href="#slide-5">5</a>
<div class="slides">
<div id="slide-1">1</div>
<div id="slide-2">2</div>
<div id="slide-3">3</div>
<div id="slide-4">4</div>
<div id="slide-5">5</div>
</div>
</div>
</body>
----------------------------------------------------------------------------------------------------------------------
ABOVE CHANGE IN LESS CSS AND USE INLINE CSS CODE
--------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------
OR USE SLIDE URL LINK IN THIS WAY
<a href="#ID1">1</a>
<a href="#ID2">2</a>
<a href="#ID3">3</a>
when we use this code on website
<a href="https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default#ID1">1</a>
<a href="https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default#ID2">2</a>
<a href="https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default#ID3">3</a>
---------------------------------------------------------------------------------------------------------------------
<style>
.slides::-webkit-scrollbar{
width:10px;
height:10px;
}
.slides::-webkit-scrollbar-thumb{
background:black;
border-radius:10px;
}
.slides::-webkit-scrollbar-track{
background:transparent;
}
</style>
<body>
<div class="SliderWrapper"style="width:310px;text-align:center;overflow:hidden;">
<a href="file:///C:/Users/Qamar/Desktop/New%20folder/index.html#ID1">1</a>
<a href="file:///C:/Users/Qamar/Desktop/New%20folder/index.html#ID2">2</a>
<a href="file:///C:/Users/Qamar/Desktop/New%20folder/index.html#ID3">3</a>
<div class="slides"style="display:flex;overflow:auto;scroll-behavior:smooth;">
<div id="ID1" style="flex-shrink:0;width:300px;
height:300px;border:5px double Red;"></div>
<div id="ID2" style="flex-shrink:0;width:300px;
height:300px;border:5px double Blue;"></div>
<div id="ID3" style="flex-shrink:0;width:300px;
height:300px;border:5px double Green;"></div>
</div>
</div>
</body>
----------------------------------------------------------------------------------------------------------------------

Posted by on Tuesday 2 June 2020 at 07:05
Labels: , ,

1 comments:

Subscribe to: Post Comments (Atom)
FB Gadgets | Template Designed by Fatakat PhotosCoolBThemes.com
Code by : paid web directory

https://www.google.co.uk/search?q=site%3Ablogspot.com+fbgadgets