PHOTO SLIDER

Developer
Vedat Sözen
Size
2,364 Kb
Views
12,144
  1. PHOTO SLIDER Previews
  2. PHOTO SLIDER HTML Codes
  3. PHOTO SLIDER CSS Codes
  4. PHOTO SLIDER JS Codes

How do I make an photo slider?

Photo slider by jquery. What is a photo slider? How do you make a photo slider? This script and codes were developed by Vedat Sözen on 27 November 2022, Sunday.

PHOTO SLIDER Previews
IQ Test

PHOTO SLIDER - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>PHOTO SLIDER</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="stil.css">
<link href='https://fonts.googleapis.com/css?family=Bitter:700' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js"></script>
<script src="https://www.bitstorm.org/jquery/color-animation/jquery.animate-colors-min.js"></script>
<script src="stil.js"></script>
</head>
<body>
<div id="container">
<div id="button"><button>1</button><button>2</button><button>3</button><button>4</button></div>
<div id="header">PHOTO SLIDER</div>
<div id="photo">	<div id="photos">	<div id="photo1"><img src="http://background-download.com/background/nature-hd-london-night-view-wallpaper-37848.jpg"></div>	<div id="photo2"><img src="http://www.fun54.com/wp-content/uploads/2011/09/jogging-track-night-view-with-buildings-view-background-nature-view-greenery-hd-wallpapers-1920-x-1200.jpg"></div>	<div id="photo3"><img src="http://wallpaper-download.net/wallpapers/beach-wallpapers-beautiful-beach-view-wallpaper-35918.jpg"></div>	<div id="photo4"><img src="http://www.hdwallpapersinn.com/wp-content/uploads/2014/09/house-hd-wallpapers-desktop.jpg"></div>	</div>
</div>
</div>
</body>
</html> <script src="js/index.js"></script>
</body>
</html>

PHOTO SLIDER - Script Codes CSS Codes

body { background:gold; margin:auto;}
#container {
margin:auto;
margin-top:20px;
height:530px;
width:500px;
}
#button {
height:30px;
width:500px;
margin:auto;
font-family: 'Bitter', serif;
font-size:30px;
color:white;
line-height:30px;
box-sizing:border-box;
text-align:center;
margin-bottom:5px;
}
#header {
height:100px;
width:500px;
margin:auto;
border:2px solid black;
line-height:200px;
font-family: 'Bitter', serif;
font-size:30px;
background:black;
color:white;
line-height:100px;
box-sizing:border-box;
text-align:center;
margin-bottom:5px;
}
#photo {
height:400px;
width:500px;
margin:auto;
box-sizing:border-box;
border:2px solid black;
overflow:hidden;
position:fixed;
}
#photos {
height:400px;
width:2500px;
margin:auto;
box-sizing:border-box;
transition:linear;
position:absolute;
}
#photo1,#photo2,#photo3,#photo4 {
height:400px;
width:500px;
margin:auto;
box-sizing:border-box;
float:left;
}
img { height:100%; width:100%;}

PHOTO SLIDER - Script Codes JS Codes

$(document).ready(function(){
$("button:nth-child(1)").click(function(){
$("#photos").animate({left:"0px"},1000);
});
$("button:nth-child(2)").click(function(){
$("#photos").animate({left:"-500px"},1000);
});
$("button:nth-child(3)").click(function(){
$("#photos").animate({left:"-1000px"},1000);
});
$("button:nth-child(4)").click(function(){
$("#photos").animate({left:"-1500px"},1000);
});
});
PHOTO SLIDER - Script Codes
PHOTO SLIDER - Script Codes
Home Page Home
Developer Vedat Sözen
Username vedatsozen
Uploaded November 27, 2022
Rating 3
Size 2,364 Kb
Views 12,144
Do you need developer help for PHOTO SLIDER?

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!

Vedat Sözen (vedatsozen) Script Codes
Name
SIMPLE BILLIARD GAME TRIAL
CHANGE BACKGROUND PHOTO WITH FORM
Drop Down Menu
LOADING ANIMATION
MATERIAL DESIGN BUTTON ANIMATION
MATERIAL DESIGN BUTTON ANIMATION
HOW TO CHANGE BACKGROUND IMAGE OF DIVS
SIMPLE PHOTO SLIDER
SIMPLE ANIMATION
SIMPLE FOOTBALL QUIZ ..
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!