Touch Slider

Developer
Theun
Size
3,587 Kb
Views
46,552
  1. Touch Slider Previews
  2. Touch Slider HTML Codes
  3. Touch Slider CSS Codes
  4. Touch Slider JS Codes

How do I make an touch slider?

What is a touch slider? How do you make a touch slider? This script and codes were developed by Theun on 23 July 2022, Saturday.

Touch Slider Previews
IQ Test

Touch Slider - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Touch Slider</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="touch-slider"> <a class="arrow-left" href="#"></a> <a class="arrow-right" href="#"></a> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><a href="http://google.com"><img src="https://dl.dropboxusercontent.com/u/913021/touch-slider/hospitality.jpg"></a></div> <div class="swiper-slide"><img src="https://dl.dropboxusercontent.com/u/913021/touch-slider/science.jpg"></div> <div class="swiper-slide"><img src="https://dl.dropboxusercontent.com/u/913021/touch-slider/stage_fighting.jpg"></div> <div class="swiper-slide"><img src="https://dl.dropboxusercontent.com/u/913021/touch-slider/stem.jpg"></div> <div class="swiper-slide"> <div class="content-slide"> <div class="content-image"><img src="https://dl.dropboxusercontent.com/u/913021/touch-slider/social_sciences.jpg"></div> <div class="content-text"><h2>Fall Registration is Upon Us!</h2><p>Lorem Ipsum is simply dummy text of the typesetting industry. This is a <a href="#">link</a></p> </div> </div> </div> </div> <div class="pagination"></div> </div> <script src="https://dl.dropboxusercontent.com/u/913021/touch-slider/idangerous.swiper-2.0.min.js"></script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Touch Slider - Script Codes CSS Codes

body { margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.5; background-color: #d8d0a7;
}
.touch-slider {	margin: 5px auto; width: 790px; height: 240px; border-bottom: 8px solid #831E3B; background: #111; position: relative;
}
.touch-slider .arrow-left,
.touch-slider .arrow-right {	position: absolute; top: 50%; margin-top: -15px; width: 17px; height: 30px;	z-index: 10000;
}
.touch-slider .arrow-left { background: url("https://dl.dropboxusercontent.com/u/913021/touch-slider/arrows.png") no-repeat left top; left: 5px; opacity: 0;}
.touch-slider .arrow-right { background: url("https://dl.dropboxusercontent.com/u/913021/touch-slider/arrows.png") no-repeat left bottom; right: 5px; opacity: 0; }
.touch-slider:hover > .arrow-left,
.touch-slider:hover > .arrow-right { opacity: 1; transition: all 0.7s ease; }
.swiper-container { height: 240px; width: 790px;
}
.content-slide { color: #fff;
}
.content-slide .content-image {	position: absolute;	z-index: -1;
}
.content-slide .content-text {	margin: 0 0 0 530px;	padding: 20px;	width: 220px;	height: 200px;	position: absolute;	z-index: 2;	background: rgb(1,25,37); /* Old browsers */	background: -moz-linear-gradient(-45deg, rgba(1,25,37,1) 0%, rgba(2,90,136,1) 100%); /* FF3.6+ */	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(1,25,37,1)), color-stop(100%,rgba(2,90,136,1))); /* Chrome,Safari4+ */	background: -webkit-linear-gradient(-45deg, rgba(1,25,37,1) 0%,rgba(2,90,136,1) 100%); /* Chrome10+,Safari5.1+ */	background: -o-linear-gradient(-45deg, rgba(1,25,37,1) 0%,rgba(2,90,136,1) 100%); /* Opera 11.10+ */	background: -ms-linear-gradient(-45deg, rgba(1,25,37,1) 0%,rgba(2,90,136,1) 100%); /* IE10+ */	background: linear-gradient(135deg, rgba(1,25,37,1) 0%,rgba(2,90,136,1) 100%); /* W3C */	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#011925', endColorstr='#025a88',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.content-text a { color: #FFF; }
.content-text a:hover { text-decoration: none; }
.pagination {	margin-left: 5px; left: 0; bottom:5px; width: 100%; z-index: 10000; position: absolute;
}
.swiper-pagination-switch { display: inline-block; width: 10px; height: 10px; border-radius: 10px; background: #FFF; box-shadow: 0px 1px 2px #000 inset; margin: 0 3px; cursor: pointer;
}
.swiper-active-switch { background: #831E3B;
}
/* * Swiper - Mobile Touch Slider CSS * http://www.idangero.us/sliders/swiper * * Vladimir Kharlampidi, The iDangero.us * http://www.idangero.us/ * * Copyright 2012-2013, Vladimir Kharlampidi * The iDangero.us * http://www.idangero.us * * Licensed under GPL & MIT *
*/
/* ===============================================================
Basic Swiper Styles
================================================================*/
.swiper-container {	margin:0 auto;	position:relative;	overflow:hidden;	-webkit-backface-visibility:hidden;	-moz-backface-visibility:hidden;	-ms-backface-visibility:hidden;	-o-backface-visibility:hidden;	backface-visibility:hidden;	/* Fix of Webkit flickering */	z-index:1;
}
.swiper-wrapper {	position:relative;	width:100%;	-webkit-transition-property:-webkit-transform, left, top;	-webkit-transition-duration:0s;	-webkit-transform:translate3d(0px,0,0);	-webkit-transition-timing-function:ease;	-moz-transition-property:-moz-transform, left, top;	-moz-transition-duration:0s;	-moz-transform:translate3d(0px,0,0);	-moz-transition-timing-function:ease;	-o-transition-property:-o-transform, left, top;	-o-transition-duration:0s;	-o-transform:translate3d(0px,0,0);	-o-transition-timing-function:ease;	-o-transform:translate(0px,0px);	-ms-transition-property:-ms-transform, left, top;	-ms-transition-duration:0s;	-ms-transform:translate3d(0px,0,0);	-ms-transition-timing-function:ease;	transition-property:transform, left, top;	transition-duration:0s;	transform:translate3d(0px,0,0);	transition-timing-function:ease;
}
.swiper-free-mode > .swiper-wrapper {	-webkit-transition-timing-function: ease-out;	-moz-transition-timing-function: ease-out;	-ms-transition-timing-function: ease-out;	-o-transition-timing-function: ease-out;	transition-timing-function: ease-out;	margin: 0 auto;
}
.swiper-slide {	float: left;
}
/* IE10 Windows Phone 8 Fixes */
.swiper-wp8-horizontal {	-ms-touch-action: pan-y;
}
.swiper-wp8-vertical {	-ms-touch-action: pan-x;
}
/* ===============================================================
Your custom styles, here you need to specify container's and slide's
sizes, pagination, etc.
================================================================*/
.swiper-container {	/* Specify Swiper's Size: */	/*width:200px;	height: 100px;*/
}
.swiper-slide {	/* Specify Slides's Size: */	/*width: 100%;	height: 100%;*/
}
.swiper-slide-active {	/* Specific active slide styling: */
}
.swiper-slide-visible {	/* Specific visible slide styling: */
}
/* ===============================================================
Pagination Styles
================================================================*/
.swiper-pagination-switch {	/* Stylize pagination button: */
}
.swiper-active-switch {	/* Specific active button style: */
}
.swiper-visible-switch {	/* Specific visible button style: */
}

Touch Slider - Script Codes JS Codes

 var mySwiper = new Swiper('.swiper-container',{ pagination: '.pagination', loop:true, grabCursor: true, paginationClickable: true, autoplay:5000, speed:750 }) $('.arrow-left').on('click', function(e){ e.preventDefault() mySwiper.swipePrev() }) $('.arrow-right').on('click', function(e){ e.preventDefault() mySwiper.swipeNext() })
Touch Slider - Script Codes
Touch Slider - Script Codes
Home Page Home
Developer Theun
Username tjoen
Uploaded July 23, 2022
Rating 3
Size 3,587 Kb
Views 46,552
Do you need developer help for Touch 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!

Theun (tjoen) Script Codes
Name
Those kids...
Catslicer
Canvas Buldings
ROTATING IMAGE SLIDER WITH JQUERY
Love is in the air...
A Pen by Theun
Roulette
Montyclock
A Pen by Theun
Three.js shooter template
Create amazing marketing copy 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!