Sure, no problem!
Thanks!
This is pretty near to the original example. Needs a bit of work but its 90% there. If you can write a bit of coding you can usually find something out there and adapt it to your own requirements, or pretty close.
<html>
<head>
<title>Slider</title>
<style>
body {
font-family: helvetica, sans-serif;
font-size: 13px;
line-height: 20px;
margin: 0;
}
* {
box-sizing: border-box;
}
img {
max-width: 100%;
height: auto;
}
.slider-container {
background-color: #f1f1f1;
padding: 50px 0 100px 0;
border-bottom: 1px solid #ccc;
}
@media screen and (max-width: 900px) {
.slider-container {
padding: 50px 0 0 0;
}
}
.slider-container h1 {
text-align: center;
padding: 0 0 30px 0;
font-weight: 400;
}
.information-boxes {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.prev i, .next i {
font-size: 60px;
color: #666;
}
@media screen and (max-width: 900px) {
.prev i, .next i {
background-color: #000;
color: #fff;
padding: 0 10px;
}
}
.slider {
width: 95%;
margin: 0 auto;
overflow: hidden;
min-height: 400px;
position: relative;
padding: 0 75px;
}
@media screen and (max-width: 900px) {
.slider {
width: 100%;
padding: 0;
min-height: 300px;
}
}
@media screen and (max-width: 480px) {
.slider {
min-height: 200px;
}
}
.slider ul {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
width: 400%;
height: 100%;
}
.slider li {
padding: 0;
margin: 0;
height: 100%;
overflow: hidden;
position: absolute;
}
.slider .image {
float: left;
width: 50%;
}
@media screen and (max-width: 900px) {
.slider .image {
float: none;
width: 100%;
}
}
.slider-wrapper{
position: relative;
}
.slider button {
position: absolute;
display: block;
box-sizing: border-box;
border: none;
outline: none;
top: 0;
bottom: 0;
color: #000;
margin: 0;
padding: 0;
text-align:center;
z-index: 2;
}
.slider button.prev {
left: 0;
background-color: transparent;
}
.slider button.next {
right: 0;
background-color: transparent;
}
.slider .content {
float: left;
width: 40%;
padding: 30px;
}
@media screen and (max-width: 900px) {
.slider .content {
float: none;
width: 100%;
padding: 20px;
}
}
.info {
width: 25%;
padding: 20px;
background-color: #f1f1f1;
}
@media screen and (max-width: 900px) {
.info {
width: 100%;
}
}
.red {
background-color: red;
color: white;
}
</style>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script>
$(function() {
var ul = $(".slider ul");
var slide_count = ul.children().length;
var slide_width_pc = 100.0 / slide_count;
var slide_index = 0;
ul.find("li").each(function(indx) {
var left_percent = (slide_width_pc * indx) + "%";
$(this).css({"left":left_percent});
$(this).css({width:(100 / slide_count) + "%"
});
});
// Listen for click of prev button
$(".slider .prev").click(function() {
console.log("prev button clicked");
slide(slide_index - 1);
if(slide_index == 1) {
$(".red").css({"background-color":"red", "color":"white"});
$(".green , .blue , .orange").css({"background-color": "#f1f1f1" , "color" : "black"});
}
if(slide_index == 2) {
$(".blue").css({"background-color":"blue", "color":"white"});
$(".red , .green, .orange").css({"background-color": "#f1f1f1" , "color" : "black"});
}
if(slide_index == 3) {
$(".green").css({"background-color":"green", "color":"white"});
$(".red , .blue, .orange").css({"background-color": "#f1f1f1" , "color" : "black"});
}
});
// Listen for click of next button
$(".slider .next").click(function() {
console.log("next button clicked");
slide(slide_index + 1);
if(slide_index == 0) {
$(".blue").css({"background-color":"blue", "color":"white"});
$(".red , .green, .orange").css({"background-color": "#f1f1f1" , "color" : "black"});
}
if(slide_index == 1) {
$(".green").css({"background-color":"green", "color":"white"});
$(".red , .blue, .orange").css({"background-color": "#f1f1f1" , "color" : "black"});
}
if(slide_index == 2) {
$(".orange").css({"background-color":"orange", "color":"white"});
$(".red , .blue, .green").css({"background-color": "#f1f1f1" , "color" : "black"});
}
});
function slide(new_slide_index) {
if(new_slide_index < 0 || new_slide_index >= slide_count) return;
var margin_left_pc = (new_slide_index * (-100)) + "%";
ul.animate({"margin-left": margin_left_pc}, 400, function() {
slide_index = new_slide_index
});
}
});
</script>
</head>
<body>
<div class="slider-container">
<h1>Slider</h1>
<div class="slider_wrapper">
<div class="slider">
<ul>
<li>
<div class="image"><img src="http://images.all-free-download.com/images/graphiclarge/blue_morpho_butterfly_189907.jpg"/></div>
<div class="content"><h2>Slide 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque iure libero praesentium quisquam sed tempora.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus illum odit quia unde vitae voluptates?</p>
</div>
</li>
<li>
<div class="image"><img src="http://images.all-free-download.com/images/graphiclarge/monarch_butterfly_193610.jpg"/></div>
<div class="content"><h2>Slide 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus illum odit quia unde vitae voluptates?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus illum odit quia unde vitae voluptates?</p>
</div>
</li>
<li>
<div class="image"><img src="http://images.all-free-download.com/images/graphiclarge/background_with_flower_and_butterfly_201511.jpg"/></div>
<div class="content"><h2>Slide 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, architecto dicta illum nisi quisquam voluptas?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus illum odit quia unde vitae voluptates?</p>
</div>
</li>
<li>
<div class="image"><img src="http://images.all-free-download.com/images/graphiclarge/butterfly_flower_01_hd_pictures_166973.jpg"/></div>
<div class="content"><h2>Slide 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, architecto dicta illum nisi quisquam voluptas?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus illum odit quia unde vitae voluptates?</p>
</div>
</li>
</ul>
<button class="prev"><i class="fa fa-angle-left" aria-hidden="true"></i></button>
<button class="next"><i class="fa fa-angle-right" aria-hidden="true"></i></button>
</div>
<!-- end slider-wrapper -->
</div>
<!-- end slider -->
</div>
<!-- end slider-container -->
<div class="information-boxes">
<div class="info red">
<h2>Slide 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ipsam iure velit vitae. Et, facere!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ipsam iure velit vitae. Et, facere!</p>
</div>
<div class="info blue">
<h2>Slide 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ipsam iure velit vitae. Et, facere!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ipsam iure velit vitae. Et, facere!</p>
</div>
<div class="info green">
<h2>Slide 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ipsam iure velit vitae. Et, facere!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ipsam iure velit vitae. Et, facere!</p>
</div>
<div class="info orange">
<h2>Slide 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ipsam iure velit vitae. Et, facere!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ipsam iure velit vitae. Et, facere!</p>
</div>
</div>
</body>
</html>
AdChoices
