Slider 2.0

Developer
Evgen Kaban
Size
3,714 Kb
Views
10,120
  1. Slider 2.0 Previews
  2. Slider 2.0 HTML Codes
  3. Slider 2.0 CSS Codes
  4. Slider 2.0 JS Codes

How do I make an slider 2.0?

What is a slider 2.0? How do you make a slider 2.0? This script and codes were developed by Evgen Kaban on 07 January 2023, Saturday.

Slider 2.0 Previews
IQ Test

Slider 2.0 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Slider 2.0</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<head> <meta charset="UTF-8"> <title>Slider 1.0</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body> <!-- portfolio slider/////////////////////////////////////////////////////////// -->
<div class="portfolio"> <div class="portfolio_foto portfolio_first"> <a href="#" class="portfolio_foto_text_link foto_arr_2"> <div class="portfolio_foto_text_link_color"></div> <div class="portfolio_foto_text_link_div"> <div class="portfolio_foto_text"> <span class="red">FOTO</span><span class="big_letters"> gallery</p> </div> </div> </a> </div> <div class="portfolio_foto"> <a href="#" class="portfolio_foto_text_link foto_arr_2"> <div class="portfolio_foto_text_link_color yellow"></div> <div class="portfolio_foto_zoom_text">zoom text</div> <div><img src="http://lorempixel.com/output/nightlife-q-g-300-300-3.jpg" width="100%" alt="lorem"></div> </a> </div> <div class="portfolio_foto"> <a href="#" class="portfolio_foto_text_link foto_arr_1"> <div class="portfolio_foto_text_link_color pink"></div> <div class="portfolio_foto_zoom_text">work now</div> <div><img src="http://lorempixel.com/output/sports-q-g-300-300-5.jpg" width="100%" alt="lorem"></div> </a> </div> <div class="portfolio_foto"> <a href="#" class="portfolio_foto_text_link foto_arr_1"> <div class="portfolio_foto_text_link_color pink"></div> <div class="portfolio_foto_zoom_text">work now</div> <div><img src="http://lorempixel.com/output/sports-q-g-300-300-5.jpg" width="100%" alt="lorem"></div> </a> </div> <div class="portfolio_foto"> <a href="#" class="portfolio_foto_text_link foto_arr_1"> <div class="portfolio_foto_text_link_color pink"></div> <div class="portfolio_foto_zoom_text">work now</div> <div><img src="http://lorempixel.com/output/sports-q-g-300-300-5.jpg" width="100%" alt="lorem"></div> </a> </div> <div class="portfolio_foto"> <a href="#" class="portfolio_foto_text_link foto_arr_1"> <div class="portfolio_foto_text_link_color pink"></div> <div class="portfolio_foto_zoom_text">work now</div> <div><img src="http://lorempixel.com/output/sports-q-g-300-300-5.jpg" width="100%" alt="lorem"></div> </a> </div> <div class="slider"> <div class="slider_backround">123</div> <a href="#"> <div class="slider_left left"><span class="quotes_left"></span></div></a> <a href="#"> <div class="slider_right"><span class="quotes_right"></span></div></a> <a href="#"> <div class="slider_close"><span class="slider_close_button">x</span></div></a> </div> </div> <!-- portfolio slider/////////////////////////////////////////////////////////// -->
</body> <script src="js/index.js"></script>
</body>
</html>

Slider 2.0 - Script Codes CSS Codes

/*portfolio slider///////////////////////////////////////////////////*/
.slider{ position: relative; background-color: #100000; width: 100%; height: 150%; overflow: hidden; display: none; position: absolute; text-align: center;
}
.slider_backround{ position: relative; text-align: center; background-color: blue; 0width: 100%; height: 100%; background: url(http://lorempixel.com/output/nightlife-q-c-300-300-6.jpg) 100% no-repeat; 0background-size: cover; background-size: contain; margin: auto; background-position:50% 50%;
}
.slider_left, .slider_right{ position: absolute; background-color: #808080; width: 110px; height: 180px; overflow: hidden; top: 35%; opacity: 0.9;
}
.slider_left{ left: -150px;
}
.slider_right{ right: -150px;
}
.active{display: block;}
.quotes_left, .quotes_right{
font-size: 250px;
color: #A9A9A9;
font-family: monospace;
quotes: "<" ">";
position: absolute;
top: -70px;
left: -12px;
}
.quotes_left:before {content: open-quote;}
.quotes_right:after {content: close-quote;}
.slider_close{ height: 65px; width: 55px; font-size: 50px; text-align: center; background-color: #808080; color: white; font-family: monospace; position: absolute; top: -0px; right: 5px; opacity: 0.8;
}
.slider_close:hover {background-color: #D3D3D3;}
.slider_close:hover .slider_close_button {color: red;}
.slider:hover .slider_left{opacity: 0.8; left: 30px; -webkit-transition: all 0.5s;}
.slider:hover .slider_right{opacity: 0.8; right: 30px; -webkit-transition: all 0.5s;}
.slider:not(:hover) .slider_left{transition: 1s;}
.slider:not(:hover) .slider_right{transition: 1s;}
.slider_left:hover .quotes_left{color: #FFFFFF;}
.slider_right:hover .quotes_right{color: #FFFFFF;}
.portfolio{ position: relative; background-color: #AFEEEE; overflow: hidden; 0padding: 0 0 0 0; 0margin: 0 auto;
}
.portfolio_foto{ position: relative; float: left; background-color: red; width: 33.3%; min-width: 300px; height: 300px;
}
.portfolio_foto_text_link_div{height: 100%; background-color: #252626;}
.portfolio_foto_text{ 0background-color: orange; padding: 120px 0 0 0; color: white; font-size: 20px; font-family: 'Pathway Gothic One', sans-serif; text-align: center;
}
.red{background-color: red; padding: 0px 7px 0px 7px;}
.big_letters, .red{font-size: 60px;}
.portfolio_foto_text_link_color{ display: none; position: absolute; width: 100%; height: 100%; 0background-color: #CF21C9; opacity: 0.8; }
.yellow{background-color: yellow;}
.pink{background-color: #F705D3;}
.portfolio_foto_zoom_text{ font-family: 'Satisfy', cursive; text-align: center; 0position: absolute; width: 200px; 0height: 50px; font-size: 40px; 0background-color: yellow; position: absolute; padding: 120px 0 0 20%; 0top: 40%; 0left: 20%; color: rgba(255, 255, 255, 0.6);
}
a:hover .portfolio_foto_zoom_text { margin: 0 auto; 0top: 40%; 0left: 20%; 0width: 200px; 0height: 50px; -webkit-transition: all 1s; font-size: 45px;}
a:not(:hover) .portfolio_foto_zoom_text { transition: 1s;
}
A:link {text-decoration: none;}
a:hover .portfolio_foto_text_link_color { display: block;}
.portfolio_first{ 0width: 200px;
}
.portfolio_foto_text_link:hover {text-decoration: none;}
.portfolio_foto_text_link {font-family: 'Fjalla One', sans-serif;}
/*portfolio slider///////////////////////////////////////////////////*/
@media screen and (min-width:605px) and (max-width:899px) { /*@media who_we are///////////////////////////////////////////////////*/
.portfolio_foto{ width: 50%; min-width: 300px; 0height: 200px;
}
.portfolio_foto_zoom_text{ padding: 120px 0 0 23%;
}
.slider{ 0height: 600px; margin: 0 0 0 0;
}
.portfolio{ background-color: blue;
}
}
@media screen and (min-width:200px) and (max-width:604px) { /*@media who_we are///////////////////////////////////////////////////*/
.portfolio_foto{ width: 100%; min-width: 300px; 0height: 200px;
}
.portfolio_foto_zoom_text{ padding: 120px 0 0 25%;
}
.slider{ height: 400px; margin: 0 0 0 0;
}
.portfolio{ background-color: green;
}
}

Slider 2.0 - Script Codes JS Codes

var foto_arr = ['http://lorempixel.com/output/technics-q-c-300-300-1', 'http://lorempixel.com/output/technics-q-c-300-300-2', 'http://lorempixel.com/output/technics-q-c-300-300-3'];
var foto_arr_1 = ['http://lorempixel.com/output/technics-q-c-300-300-1', 'http://lorempixel.com/output/technics-q-c-300-300-2', 'http://lorempixel.com/output/technics-q-c-300-300-3'];
var foto_arr_2 = ['http://lorempixel.com/output/animals-q-c-640-480-10', 'http://lorempixel.com/output/animals-q-c-640-480-2', 'http://lorempixel.com/output/animals-q-c-640-480-5'];
var foto_number = 0;
$("documetnt").ready(function() { $(".slider_backround").css('background-image', 'url(' + foto_arr_number[foto_number] + '.jpg)');
});
var foto_arr_number = '';
$("body").on("click", ".portfolio_foto_text_link", function change_class (event) { $(".slider").removeClass("active"); foto_arr_number = ($(this).attr('class').split(' ')[1]); foto_arr_number = window[foto_arr_number]; change_foto_slader(); if( $(document).width() > 600 ){$(".slider").addClass("active");}
});
$(document).mouseup(function (e) { var container = $(".slider"); if (container.has(e.target).length === 0){ $(".slider").removeClass("active"); }
});
///////////////////////////////////////////////////////////////////
function change_foto_slader() { $( ".slider_backround" ).fadeOut( 200 ); $(".slider_backround").css('background-image', 'url(' + foto_arr_number[foto_number] + '.jpg)'); $( ".slider_backround" ).fadeIn( 500 ); //console.log ( 'Привет' );
}
$("body").on("click", ".slider_left", function change_class (event) { foto_number -= 1; if (foto_number < 0){foto_number = foto_arr_number.length-1;}; change_foto_slader(); //console.log($(this).attr('class').split(' ')[1]); //console.log (foto_arr.length);
});
$("body").on("click", ".slider_right", function change_class (event) { foto_number += 1; if (foto_number > foto_arr.length-1){foto_number = 0;} change_foto_slader(); //console.log (foto_number);
});
$("body").on("click", ".slider_close", function change_class (event) { $(".slider").removeClass("active");
});
function func() { foto_number += 1; if (foto_number > foto_arr.length-1){foto_number = 0;}; change_foto_slader(); console.log ( 'Привет' );
}
//setInterval(func, 2000);
Slider 2.0 - Script Codes
Slider 2.0 - Script Codes
Home Page Home
Developer Evgen Kaban
Username Evgen097
Uploaded January 07, 2023
Rating 3
Size 3,714 Kb
Views 10,120
Do you need developer help for Slider 2.0?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Evgen Kaban (Evgen097) Script Codes
Name
Zmeika
Bootstrap
What we do 2
Menu
Educenter
CONTACT US
A Pen by Evgen Kaban
Game_2
Angular_templ_1
Welcome
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!