Jquery Automatic Image Slider Source Code Free Download

Jquery automatic image slider free download

Jquery automatic image slider is developed in HTML, CSS3 and Jquery. This slider is used for multipurpose slideshow on your websites.

Slider Features

Table of Contents

Photo Slider
3D Banner slideshow
Jquery Slider
Navigation (next/prev) option available
Add unlimited Images
Caption and Title
Add Hyperlinks for redirection
Automatic Slideshow html
Image slideshow

Jquery automatic image slider free download live demo and download link available in bottom

Follow the below steps to create the Jquery automatic HTML slider using HTML, CSS and Jquery

Step -1

Create index.html and paste the below javascript and CSS url in the header section.

<link rel="stylesheet" type="text/css" href="css/slider.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/modernizr.custom.js"></script>

Step -2

After that copy the below HTML code and paste in body section.

<div class="container">
<header>
	<h1><span>Jquery automatic html slider free download live demo and download</span></h1>
</header>
<section id="dg-container" class="dg-container">
	<div class="dg-wrapper">
		<a href="#"><img src="images/1.jpg" alt="JAVASCRIPT"><div>JAVASCRIPT</div></a>
		<a href="#"><img src="images/2.jpg" alt="HTML"><div>HTML</div></a>
		<a href="#"><img src="images/3.jpg" alt="CSS"><div>CSS3</div></a>
		<a href="#"><img src="images/4.jpg" alt="WORDPRESS"><div>WORDPRESS</div></a>
		<a href="#"><img src="images/5.jpg" alt="JQUERY"><div>JQUERY</div></a>
	</div>
	<nav>	
		<span class="dg-prev">&lt;</span>
		<span class="dg-next">&gt;</span>
	</nav>
</section>
        </div>

<h1><span>Jquery automatic html slider free download live demo and download</span></h1>

</header>

<a href="#"><img src="images/1.jpg" alt="JAVASCRIPT"><div>JAVASCRIPT</div></a>

<a href="#"><img src="images/4.jpg" alt="WORDPRESS"><div>WORDPRESS</div></a>

<a href="#"><img src="images/5.jpg" alt="JQUERY"><div>JQUERY</div></a>

</div>

<nav>

</nav>

</section>

</div>

Step -3

Apart from this copy the below jquery link and javascript url and paste it in the footer section, Before the body section closed. You can also download the Jquery from Ajax library and place it in the project js folder.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
	$(function() {
	$('#dg-container').gallery({
	autoplay:true
	});
	});
</script/>

$(function() {

$('#dg-container').gallery({

autoplay:true

});

</script/>

Step -4

Create style.css and paste the below CSS to design the image slideshow or you can also download CSS file from the below given link and place it in a project CSS folder



.dg-container{
	width: 100%;
	height: 450px;
	position: relative;
}
.dg-wrapper{
	width: 481px;
	margin: 0 auto;
	position: relative;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	-o-perspective: 1000px;
	-ms-perspective: 1000px;
	perspective: 1000px;
}
.dg-wrapper a{
	width: 482px;
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	background: transparent url(../images/browser.png) no-repeat top left;
	box-shadow: 0px 10px 20px rgba(0,0,0,0.3);
}
.dg-wrapper a.dg-transition{
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.dg-wrapper a img{
	display: block;
	padding: 41px 0px 0px 1px;
}
.dg-wrapper a div{
	font-style: italic;
	text-align: center;
	line-height: 50px;
	color: #fff;
	font-size: 16px;
	width: 100%;
	bottom: -12px;
	display: none;
	position: absolute;
}
.dg-wrapper a.dg-center div{
	display: block;
}
.dg-container nav{
	width: 58px;
	position: absolute;
	z-index: 1000;
	bottom: 40px;
	left: 50%;
	margin-left: -29px;
}
.dg-container nav span{
	text-indent: -9000px;
	float: left;
	cursor:pointer;
	width: 24px;
	height: 25px;
	opacity: 0.8;
	background: transparent url(../images/arrows.png) no-repeat top left;
}
.dg-container nav span:hover{
	opacity: 1;
}
.dg-container nav span.dg-next{
	background-position: top right;
	margin-left: 10px;
}

.dg-container{

width: 100%;

height: 450px;

position: relative;

}

.dg-wrapper{

width: 481px;

margin: 0 auto;

position: relative;

-webkit-transform-style: preserve-3d;

-moz-transform-style: preserve-3d;

-o-transform-style: preserve-3d;

-ms-transform-style: preserve-3d;

transform-style: preserve-3d;

-webkit-perspective: 1000px;

-moz-perspective: 1000px;

-o-perspective: 1000px;

-ms-perspective: 1000px;

perspective: 1000px;

}

.dg-wrapper a{

width: 482px;

display: block;

position: absolute;

left: 0;

top: 0;

background: transparent url(../images/browser.png) no-repeat top left;

box-shadow: 0px 10px 20px rgba(0,0,0,0.3);

}

.dg-wrapper a.dg-transition{

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

.dg-wrapper a img{

display: block;

padding: 41px 0px 0px 1px;

}

.dg-wrapper a div{

font-style: italic;

text-align: center;

line-height: 50px;

color: #fff;

font-size: 16px;

width: 100%;

bottom: -12px;

display: none;

position: absolute;

}

.dg-wrapper a.dg-center div{

display: block;

}

.dg-container nav{

width: 58px;

position: absolute;

z-index: 1000;

bottom: 40px;

left: 50%;

margin-left: -29px;

}

.dg-container nav span{

text-indent: -9000px;

float: left;

cursor:pointer;

width: 24px;

height: 25px;

opacity: 0.8;

background: transparent url(../images/arrows.png) no-repeat top left;

}

.dg-container nav span:hover{

opacity: 1;

}

.dg-container nav span.dg-next{

background-position: top right;

margin-left: 10px;

}

Create another slider.css and paste the below css for style.

@font-face {
font-family: 'Muli Regular';
font-style: normal;
font-weight: normal;
src: local('Muli Regular'), url('Muli-Regular.woff') format('woff');
}


/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
html,body {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
address,caption,cite,code,dfn,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}
section, header{
	display: block;
}
/* General Demo Style */
body{
	font-family: "Muli Regular" serif;
	background: #333 url(../images/bg.jpg) repeat top left;
	font-weight: 400;
	font-size: 15px;
	color: #f0f0f0;
	overflow-y: scroll;
}
a{
	color: #ddd;
	text-decoration: none;
}
a:hover{
	color: #fff;
}
.container{
	width: 100%;
	position: relative;
	text-align: center;
}
.clr{
	clear: both;
}
.container > header{
	padding: 20px 30px 10px 30px;
	margin-bottom: 40px;
	position: relative;
	display: block;
    text-align: center;
}
.container > header h1{
	font-family: "Muli Regular", Arial, sans-serif;
	font-size: 35px;
	position: relative;
	font-weight: 300;
	text-transform: uppercase;
	color: rgba(101,141,114,0.9);
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    padding: 0px 0px 5px 0px;
}
.container > header h1 span{
	color: #fff;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.4);
}
.container > header h2{
	
}
/* Header Style */
.codrops-top{
	line-height: 24px;
	font-size: 11px;
	background: rgba(255, 255, 255, 0.5);
	text-transform: uppercase;
	z-index: 9999;
	position: relative;
	box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
	-webkit-animation: slideOut 0.5s ease-in-out 0.3s backwards;
}
@-webkit-keyframes slideOut{
	0%{top:-30px; opacity: 0;}
	100%{top:0px; opacity: 1;}
}
.codrops-top a{
	padding: 0px 10px;
	letter-spacing: 1px;
	color: #333;
	text-shadow: 0px 1px 1px #fff;
	display: block;
	float: left;
}
.codrops-top a:hover{
	background: #fff;
}
.codrops-top span.right{
	float: right;
}
.codrops-top span.right a{
	float: left;
	display: block;
}
.codrops-demos{
	text-align:center;
	display: block;
	padding-top: 20px;
}
.codrops-demos a, 
.codrops-demos a.current-demo,
.codrops-demos a.current-demo:hover{
    display: inline-block;
	border: 1px solid #719c7f;
	padding: 4px 10px 3px;
	font-size: 13px;
	line-height: 18px;
	margin: 0px 3px;
	font-weight: 800;
	-webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
	-moz-box-shadow:0px 1px 1px rgba(0,0,0,0.1);
	box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background: #90bd9e;
	background: -moz-linear-gradient(top, #90bd9e 0%, #72a081 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#90bd9e), color-stop(100%,#72a081));
	background: -webkit-linear-gradient(top, #90bd9e 0%,#72a081 100%);
	background: -o-linear-gradient(top, #90bd9e 0%,#72a081 100%);
	background: -ms-linear-gradient(top, #90bd9e 0%,#72a081 100%);
	background: linear-gradient(top, #90bd9e 0%,#72a081 100%);
}
.codrops-demos a:hover{
	background: #85b995;
}
.codrops-demos a:active{
	-webkit-box-shadow: 0px 1px 1px rgba(255,255,255,0.4);
	-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.4);
	box-shadow: 0px 1px 1px rgba(255,255,255,0.4);
}
.codrops-demos a.current-demo,
.codrops-demos a.current-demo:hover{
	color: #506757;
	text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
}
/* Media Queries */
@media screen and (max-width: 767px) {
	.container > header{
		text-align: center;
	}
	p.codrops-demos {
		position: relative;
		top: auto;
		left: auto;
	}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

@font-face {

font-family: 'Muli Regular';

font-style: normal;

font-weight: normal;

src: local('Muli Regular'), url('Muli-Regular.woff') format('woff');

}

/* CSS reset */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {

margin:0;

padding:0;

}

html,body {

margin:0;

padding:0;

}

table {

border-collapse:collapse;

border-spacing:0;

}

fieldset,img {

border:0;

}

address,caption,cite,code,dfn,th,var {

font-style:normal;

font-weight:normal;

}

ol,ul {

list-style:none;

}

caption,th {

text-align:left;

}

h1,h2,h3,h4,h5,h6 {

font-size:100%;

font-weight:normal;

}

q:before,q:after {

content:'';

}

abbr,acronym { border:0;

}

section, header{

display: block;

}

/* General Demo Style */

body{

font-family: "Muli Regular" serif;

background: #333 url(../images/bg.jpg) repeat top left;

font-weight: 400;

font-size: 15px;

color: #f0f0f0;

overflow-y: scroll;

}

color: #ddd;

text-decoration: none;

}

a:hover{

color: #fff;

}

.container{

width: 100%;

position: relative;

text-align: center;

}

.clr{

clear: both;

}

.container > header{

padding: 20px 30px 10px 30px;

margin-bottom: 40px;

position: relative;

display: block;

text-align: center;

}

.container > header h1{

font-family: "Muli Regular", Arial, sans-serif;

font-size: 35px;

position: relative;

font-weight: 300;

text-transform: uppercase;

color: rgba(101,141,114,0.9);

text-shadow: 1px 1px 1px rgba(0,0,0,0.2);

padding: 0px 0px 5px 0px;

}

.container > header h1 span{

color: #fff;

text-shadow: 1px 1px 1px rgba(255,255,255,0.4);

}

.container > header h2{

}

/* Header Style */

.codrops-top{

line-height: 24px;

font-size: 11px;

background: rgba(255, 255, 255, 0.5);

text-transform: uppercase;

z-index: 9999;

position: relative;

box-shadow: 1px 0px 2px rgba(0,0,0,0.2);

-webkit-animation: slideOut 0.5s ease-in-out 0.3s backwards;

}

@-webkit-keyframes slideOut{

0%{top:-30px; opacity: 0;}

100%{top:0px; opacity: 1;}

}

.codrops-top a{

padding: 0px 10px;

letter-spacing: 1px;

color: #333;

text-shadow: 0px 1px 1px #fff;

display: block;

float: left;

}

.codrops-top a:hover{

background: #fff;

}

.codrops-top span.right{

float: right;

}

.codrops-top span.right a{

float: left;

display: block;

}

.codrops-demos{

text-align:center;

display: block;

padding-top: 20px;

}

.codrops-demos a,

.codrops-demos a.current-demo,

.codrops-demos a.current-demo:hover{

display: inline-block;

border: 1px solid #719c7f;

padding: 4px 10px 3px;

font-size: 13px;

line-height: 18px;

margin: 0px 3px;

font-weight: 800;

-webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.1);

-moz-box-shadow:0px 1px 1px rgba(0,0,0,0.1);

box-shadow: 0px 1px 1px rgba(0,0,0,0.1);

color: #fff;

text-shadow: 1px 1px 1px rgba(0,0,0,0.9);

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

background: #90bd9e;

background: -moz-linear-gradient(top, #90bd9e 0%, #72a081 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#90bd9e), color-stop(100%,#72a081));

background: -webkit-linear-gradient(top, #90bd9e 0%,#72a081 100%);

background: -o-linear-gradient(top, #90bd9e 0%,#72a081 100%);

background: -ms-linear-gradient(top, #90bd9e 0%,#72a081 100%);

background: linear-gradient(top, #90bd9e 0%,#72a081 100%);

}

.codrops-demos a:hover{

background: #85b995;

}

.codrops-demos a:active{

-webkit-box-shadow: 0px 1px 1px rgba(255,255,255,0.4);

-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.4);

box-shadow: 0px 1px 1px rgba(255,255,255,0.4);

}

.codrops-demos a.current-demo,

.codrops-demos a.current-demo:hover{

color: #506757;

text-shadow: 0px 1px 1px rgba(255,255,255,0.3);

}

/* Media Queries */

@media screen and (max-width: 767px) {

.container > header{

text-align: center;

}

p.codrops-demos {

position: relative;

top: auto;

left: auto;

}

Conclusion

Jquery automatic HTML slider free project source code download by clicking on the download button.

Source Code for Jquery automatic HTML slider free download

Automatic Image Slider Source Code

1 file(s) 0.00 KB

Download

Live Demo

December 13, 2022

HTMLCSS

Owl Carousel Product Slider in HTML5

Know Details

December 7, 2022

HTMLCSS

Review Page Design in HTML5 Download

Know Details

December 4, 2022

HTMLCSS

Product Grid in HTML5

Know Details

jQuery Carousel Slider With Accordion Style Transitions

June 6, 2022

HTMLCSS

jQuery Carousel Slider With Accordion Style Transitions

Know Details

Testimonials HTML Template Free Download

January 15, 2022

HTMLCSS

Testimonials HTML Template Free Download

Know Details

Bootstrap Table with Pagination and Search

January 9, 2022

HTMLCSS

Bootstrap Table with Pagination and Search

Know Details

Jquery Automatic Image Slider Source Code Free Download

Slider Features

Jquery automatic image slider free download live demo and download link available in bottom

Follow the below steps to create the Jquery automatic HTML slider using HTML, CSS and Jquery

Step -1

Step -2

Step -3

Step -4

Conclusion

Source Code for Jquery automatic HTML slider free download

Automatic Image Slider Source Code

Related Post

Owl Carousel Product Slider in HTML5

Review Page Design in HTML5 Download

Product Grid in HTML5

jQuery Carousel Slider With Accordion Style Transitions

Testimonials HTML Template Free Download

Bootstrap Table with Pagination and Search

Leave a Reply Cancel reply

Search

Donate

Adobe Photoshop

API Integrations

Bootstrap 5.0 Tutorials

Database Query

Email Templates

Flask and MongoDB

Google Cloud

HTML and CSS

Javascript

PHP

Search Engine Optimization

Templates

Wordpress Theme

Advertisement

Quick Links

Important Links

Share on

Cookie	Duration	Description
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

Slider Features

Jquery automatic image slider free download live demo and download link available in bottom

Follow the below steps to create the Jquery automatic HTML slider using HTML, CSS and Jquery

Step -1

Step -2

Step -3

Step -4

Conclusion

Source Code for Jquery automatic HTML slider free download

Automatic Image Slider Source Code

Share this:

Related Post

Owl Carousel Product Slider in HTML5

Review Page Design in HTML5 Download

Product Grid in HTML5

jQuery Carousel Slider With Accordion Style Transitions

Testimonials HTML Template Free Download

Bootstrap Table with Pagination and Search

Leave a Reply Cancel reply

Search

Donate

Categories

Adobe Photoshop

API Integrations

Bootstrap 5.0 Tutorials

Database Query

Email Templates

Flask and MongoDB

Google Cloud

HTML and CSS

Javascript

PHP

Search Engine Optimization

Templates

Wordpress Theme

Advertisement