Please help. I have an image carousel on my website. When resizing the browser, the carousel adjusts accordingly, but the images and the caption text is being cut. Would you please provide me with a feedback on how to make it responsive? Thank you in advance for your help.
<script src="js/menu.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/slides.min.jquery.js"></script>
<script type="text/javascript">
$(function(){
$('#slides').slides({
effect: 'fade',
crossfade:true,
fadeSpeed:1200,
preload: true,
preloadImage: 'images/loading.gif',
play: 4000,
pause: 2500,
slideSpeed: 1000,
hoverPause: false
});
});
</script>
.slides_container {
width: 100%;
height: 459px;
overflow: hidden;
position: relative;
display: block;
margin: 0px auto;
-webkit-box-shadow: 0px 5px 3px #E3E4E7;
box-shadow: 0px 5px 3px #E3E4E7;
}
.slides_container a {
width: 100%;
height: 459px;
margin: 0 auto;
display: block;
}
.slides_container a img {
display: block;
max-width: 100%;
height: auto;
}
.image_text {
width: 600px;
position: absolute;
top: 55%;
left: 30%;
font-weight: bold;
height: auto;
padding: 20px;
font-size: 50px;
color: rgba(66,66,66,1.00);
text-align: center;
line-height: 50px;
background: #FFFFFF;
opacity: 0.7;
filter: alpha(opacity=70); /* For IE8 and earlier */
font-family: "Capsuula", san-serif;
letter-spacing: 1.5px;
border-radius: 8px;
}
.pagination {
margin-top: 315px;
margin-left: 930px;
width: 100px;
position: absolute;
z-index: 99;
top: 297px;
left: -3px;
}
<div class="example">
<ul class="pagination">
<li></li>
</ul>
<div id="slides">
<div class="slides_container">
<div style="background:url(images/index-banner-1.png);">
<div class="image_text">Caption 1 </div>
<div><img class="slides-img" src="images/index-banner-1.png" alt="Slide-1"/></div>
</div>
<div style="background:url(images/index-banner-2.png);">
<div class="image_text">Caption 2</div>
<div><img class="slides-img" src="images/index-banner-2.png" alt="Slide-2"/></div>
</div>
<div style="background:url(images/index-banner-3.png);">
<div class="image_text">Caption 3</div>
<div><img class="slides-img" src="images/index-banner-3.png" alt="Slide-3"/></div>
</div>
</div>
</div>
</div>
Related
I need help making the transition duration, specifically, when the photo slide to the left, it slides 1px per 20 milliseconds.
The transition should happen when clicking on the photo itself, not the bars below.
While the sliding is in process, clicking the image will not have any effect.
When the second image takes the place of the first one, the first image will take place(circular fashion).
body{
margin: 0;
padding: 0;
background: #34495e;
}
.slidershow{
width: 700px;
height: 400px;
overflow: hidden;
}
.middle{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.navigation{
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.bar{
width: 50px;
height: 10px;
border: 2px solid #fff;
margin: 6px;
cursor: pointer;
transition: 0.4s;
}
.bar:hover{
background: #fff;
}
input[name="r"]{
position: absolute;
visibility: hidden;
}
.slides{
width: 500%;
height: 100%;
display: flex;
}
.slide{
width: 20%;
transition: 0.02s;
}
.slide img{
width: 100%;
height: 100%;
}
#r1:checked ~ .s1{
margin-left: 0;
}
#r2:checked ~ .s1{
margin-left: -20%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>hw3</title>
</head>
<body>
<div class="slidershow middle">
<div class="slides">
<input type="radio" name="r" id="r1" checked>
<input type="radio" name="r" id="r2">
<div class="slide s1">
<img src="1.jpg" alt="image">
</div>
<div class="slide">
<img src="2.jpg" alt="image">
</div>
</div>
</div>
<div class="navigation">
<label for="r1" class="bar"></label>
<label for="r2" class="bar"></label>
</div>
</div>
</body>
</html>
I have implemented Slick.js to mine project but for some reason when I use nextArrow and prevArrow my picture gets cropped to around 60% of the width, I have tried to make a custom class which deffiness a width of 100% but that didn't solve the problem. Just checked only prevArrow causes a problem
Here is how it should look like:
Here is how it looks like:
$('.slider-one').not(".slick-initialized").slick({
autoplay: true,
autoplaySpeed: 3000,
dots: true,
prevArrow: ".site-slider .slider-btn .prev",
nextArrow: ".site-slider .slider-btn .next"
});
.wid {
width: 100% !important;
height: 500px;
}
/*Slider*/
.site-sider {
position: relative;
}
.position-top {
position: absolute;
top: 45%;
}
.site-slider .slider-btn .prev,
.site-slider .slider-btn .next {
background-color: #091a5d;
padding: 1rem 1.5rem;
border-radius: 50%;
color: white;
margin: 0 1rem;
opacity: 0;
transition: opacity 1s ease;
}
.site-slider:hover .slider-btn .prev,
.site-slider:hover .slider-btn .next {
opacity: 0.9;
}
.right-0 {
right: 0;
}
.slick-dots {
left:50%;
display: flex;
justify-content: center;
margin: 0;
padding: 16px 0;
list-style-type: none;
position: absolute;
bottom: 0;
right: 50%;
}
.slick-dots li {
margin: 0 0.6rem;
}
.slick-dots button {
display: block;
width: 8px;
height: 8px;
padding: 0;
border: none;
background-color: white;
text-indent: -99999px;
border-radius: 100%;
}
.slick-dots .slick-active button {
transform: scale(2.5);
box-shadow: 0px 3px 5px 1px rgba(0, 0, 0, 0.205);
}
<!DOCTYPE html>
<html lang="en">
<head>
<!--Font-->
<script src="https://kit.fontawesome.com/158e82d513.js" crossorigin="anonymous"></script>
<!--Slider-->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css" />
<!--Styles-->
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<main>
<!--Slider-->
<div class="container-fluid p-0">
<div class="site-slider">
<div class="slider-one">
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png" class="wid img-fluid" alt="Slika 1">
</div>
<div>
<img src="https://www.talkwalker.com/images/2020/blog-headers/image-analysis.png" class="wid img-fluid" alt="Slika 2">
</div>
<div>
<img src="https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg" class="wid img-fluid" alt="Slika 3">
</div>
</div>
<div class="slider-btn">
<span class="prev position-top"><i class="fas fa-chevron-left"></i></span>
<span class="next position-top right-0"><i class="fas fa-chevron-right"></i></span>
</div>
</div>
</div>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
<script src="js/main.js"></script>
</body>
So if anyone knows how to solve this, help a brother out :) <3
Instead of class use image directly
$('.slider-one').not(".slick-initialized").slick({
prevArrow:"<img class='a-left control-c prev slick-prev' src='../images/shoe_story/arrow-left.png'>",
nextArrow:"<img class='a-right control-c next slick-next' src='../images/shoe_story/arrow-right.png'>" });
If Your are using bootstrap 3 Use this
.slick-prev:before, .slick-next:before {
font-family: "Glyphicons Halflings","slick", sans-serif;
font-size: 40px;
}
.slick-prev:before { content: "\e257"; }
.slick-next:before { content: "\e258"; }
I have a question about slick sliders. I've made a slider with a slick, I want to create an indicator for each slide. I have the code in Codepen, please check.
What I Want
When I was on the first slide, the active border was on the slider 1 indicator, when I was on slide 2 the indicator was on the slider 2 indicator as below.
I've been looking for several ways but still nothing I can use. if you know how, please help me. Because I don't know how to make custom indicators like that. I need your help please.
HTML
<section id="bannerHome">
<div class="container-fluid">
<div class="row">
<div class="col-12" id="homeBanner">
<div class="slider-banner">
<div class="item">
<div class="content">
<div class="first-layer">
<p>01</p>
<p>01</p>
</div>
<div class="second-layer">
<div class="title">
<h1>
Digitalisasi dan Industri 4.0: Manajemen data untuk perkembangan tren transformasi
</h1>
</div>
<div class="date">
<p>Lintasarta</p>
<p>July 30, 2020</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="first-layer">
<p>02</p>
<p>02</p>
</div>
<div class="second-layer">
<div class="title">
<h1>
Digitalisasi dan Industri 4.0: Manajemen data untuk perkembangan tren transformasi
</h1>
</div>
<div class="date">
<p>Lintasarta</p>
<p>July 30, 2020</p>
</div>
</div>
</div>
</div>
</div>
<div class="slider-indicator">
<div class="slider-1 active">
For Slider 1
</div>
<div class="slider-2">
For Slider 2
</div>
</div>
</div>
</div>
</div>
</section>
CSS
#bannerHome{
height: 100vh ;
background-color: #c6c6c6;
#homeBanner {
height: 100vh ;
padding: 0;
.slider-banner {
height: 100%;
width: 100%;
.item {
height: 100vh ;
.content{
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
height: 100%;
padding: 0 10%;
.first-layer{
position: absolute;
top: 45%;
left: 0;
transform: translate(0, -45%);
p {
color: #fff;
font-size: 350px;
opacity: .15;
&:nth-child(2){
position: absolute;
font-size:45px;
top: 40%;
left: 25%;
transform: translate(-25%, -40%);
opacity: 1;
&::before{
content: '';
position: absolute;
width: 20px;
height: 3px;
background-color: #fff;
top: 10px;
left: -50px;
}
}
}
}
.second-layer{
.title{
width:55%;
h1{
color: #fff;
font-size: 25px;
line-height: 25px;
}
}
.date{
display: flex;
position: relative;
margin-top: 30px;
p{
color: #e6e6e6;
margin-right: 10px;
font-size: 15px;
&:nth-child(2){
padding-left: 10px;
position: relative;
display:none;
&::before{
content: '';
position: absolute;
left: 0;
bottom: 0;
border-left: 1px solid #e6e6e6;
height: 100%;
}
}
}
}
}
}
}
}
}
}
.arrowBannerLeft{
position: absolute;
background: transparent;
border: none;
top: 55%;
left: 5%;
transform: translate(-5%, -55%);
z-index: 1;
&:focus{
outline: none;
box-shadow: none;
}
}
.arrowBannerRight{
position: absolute;
background: transparent;
border: none;
top: 48%;
left: 5%;
transform: translate(-5%, -48%);
z-index: 1;
&:focus{
outline: none;
box-shadow: none;
}
}
.slider-indicator {
position: absolute;
display: flex;
bottom: 15%;
left: 50%;
transform: translate(-50%, -15%);
z-index: 1;
.slider-1, .slider-2 {
color: #fff;
padding: 10px 40px;
border-top: 1px solid #000;
&.active{
border-top: 3px solid #EB961D;
}
}
}
JS
var bannerSlider = $('.slider-banner');
$('.slider-banner').slick({
// arrows: false,
// dots: true,
slidesToShow: 1,
slidesToScroll: 1,
prevArrow: "<button class='arrowBannerLeft'><img src='assets/img/component/icon/arrowBlockLeft.svg' class='img-fluid'></button>",
nextArrow: "<button class='arrowBannerRight'><img src='assets/img/component/icon/arrowBlockRight.svg' class='img-fluid'></button>",
});
$(".arrowBannerLeft").on("click", function() {
$('.slider-banner').slick("slickNext");
var currentSlideIndex = $(".slider-banner").slick("slickCurrentSlide")
});
$(".arrowBannerRight").on("click", function() {
$(".slider-banner").slick("slickPrev");
var currentSlideIndex = $(".slider-banner").slick("slickCurrentSlide");
});
$('.slider-banner').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
var active_val = parseInt($(".slider-indicator .slide").addClass('active'));
var currentSlideIndex = nextSlide;
});
Check out this snippet:
#bannerHome{
height: 100vh ;
background-color: #c6c6c6;
#homeBanner {
height: 100vh ;
padding: 0;
.slider-banner {
height: 100%;
width: 100%;
.item {
height: 100vh ;
.content{
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
height: 100%;
padding: 0 10%;
.first-layer{
position: absolute;
top: 45%;
left: 0;
transform: translate(0, -45%);
p {
color: #fff;
font-size: 350px;
opacity: .15;
&:nth-child(2){
position: absolute;
font-size:45px;
top: 40%;
left: 25%;
transform: translate(-25%, -40%);
opacity: 1;
&::before{
content: '';
position: absolute;
width: 20px;
height: 3px;
background-color: #fff;
top: 10px;
left: -50px;
}
}
}
}
.second-layer{
.title{
width:55%;
h1{
color: #fff;
font-size: 25px;
line-height: 25px;
}
}
.date{
display: flex;
position: relative;
margin-top: 30px;
p{
color: #e6e6e6;
margin-right: 10px;
font-size: 15px;
&:nth-child(2){
padding-left: 10px;
position: relative;
display:none;
&::before{
content: '';
position: absolute;
left: 0;
bottom: 0;
border-left: 1px solid #e6e6e6;
height: 100%;
}
}
}
}
}
}
}
}
}
}
.arrowBannerLeft{
position: absolute;
background: transparent;
border: none;
top: 55%;
left: 5%;
transform: translate(-5%, -55%);
z-index: 1;
&:focus{
outline: none;
box-shadow: none;
}
}
.arrowBannerRight{
position: absolute;
background: transparent;
border: none;
top: 48%;
left: 5%;
transform: translate(-5%, -48%);
z-index: 1;
&:focus{
outline: none;
box-shadow: none;
}
}
.slider-indicator {
position: absolute;
display: flex;
bottom: 15%;
left: 50%;
transform: translate(-50%, -15%);
z-index: 1;
}
.slider-1, .slider-2 {
color: #fff;
padding: 10px 40px;
border-top: 1px solid #000;
}
.slider-1.active, .slider-2.active{
border-top: 3px solid #EB961D;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" integrity="sha512-6lLUdeQ5uheMFbWm3CP271l14RsX1xtx+J5x2yeIDkkiBpeVTNhTqijME7GgRKKi6hCqovwCoBTlRBEC20M8Mg==" crossorigin="anonymous" />
<title>Test</title>
</head>
<body>
<section id="bannerHome">
<div class="container-fluid">
<div class="row">
<div class="col-12" id="homeBanner">
<div class="slider-banner">
<div class="item">
<div class="content">
<div class="first-layer">
<p>01</p>
</div>
<div class="second-layer">
<div class="title">
<h1>
Digitalisasi dan Industri 4.0: Manajemen data untuk perkembangan tren transformasi
</h1>
</div>
<div class="date">
<p>Lintasarta</p>
<p>July 30, 2020</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="first-layer">
<p>02</p>
</div>
<div class="second-layer">
<div class="title">
<h1>
Digitalisasi dan Industri 4.0: Manajemen data untuk perkembangan tren transformasi
</h1>
</div>
<div class="date">
<p>Lintasarta</p>
<p>July 30, 2020</p>
</div>
</div>
</div>
</div>
</div>
<div class="slider-indicator">
<div class="slider-1 active">
For Slider 1
</div>
<div class="slider-2">
For Slider 2
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"></script>
<script type="text/javascript">
var bannerSlider = $('.slider-banner');
$('.slider-banner').slick({
// arrows: false,
// dots: true,
slidesToShow: 1,
slidesToScroll: 1,
prevArrow: "<button class='arrowBannerLeft'><i class='fas fa-chevron-left'></i></button>",
nextArrow: "<button class='arrowBannerRight'><i class='fas fa-chevron-right'></i></button>",
});
$(".arrowBannerLeft").on("click", function() {
$('.slider-banner').slick("slickNext");
var currentSlideIndex = $(".slider-banner").slick("slickCurrentSlide")
});
$(".arrowBannerRight").on("click", function() {
$(".slider-banner").slick("slickPrev");
var currentSlideIndex = $(".slider-banner").slick("slickCurrentSlide");
});
$('.slider-banner').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
$(".slider-"+(nextSlide+1)).addClass('active');
$(".slider-"+(currentSlide+1)).removeClass('active');
var currentSlideIndex = nextSlide;
});
</script>
</body>
</html>
I am new in javascript and try to make accordion with jquery but it seems it change the background color of the div and no matter what is the setting of the background color in the css the accordion doesn't seems to respond.
here is the html code
<!doctype html>
<html>
<head>
<title>dreampage </title>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"> </script>
</head>
<body>
<div class="newsbackground">
<div class="newsfeed">
here is the div that I manipulate to become accordion
<div class="fake_background_post">
<h1 class="poster">
<p class="post_text">Share your feeling to us! </p>
</h1>
</div>
<div class="post_panel">
<form action="index.php" method="get" name="post">
<img class="upload_video_and_picture" src="./img/logo/camera.png" />
<p class="upload_video_and_picture_post_text"> <b>Upload Pictures or Video </b> </p>
<textarea placeholder="say something!!!" class="post_content" name="post_content" cols="60%" > </textarea>
<div class="feeling">
<p class="feeling_text">FEELING!!! </p>
<div class="feeling_logo">
<img class="happy" src="./img/logo/happy-ticon.png" />
<img class="excited" src="./img/logo/excited.png" />
<img class="sad" src="./img/logo/sad-ticon.png" />
<img class="mad" src="./img/logo/mad-ticon.png" />
<img class="bored" src="./img/logo/bored-ticon.png" />
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$(".post").accordion ({
animate: 1500,
active: 1,
coolapsible: true,
event: "click",
heightstyle: "content",
});
</script>
</body>
</html>
here is the css code
* {margin: 0px;
padding; 0px;
font-family:comic sans ms;
}
.post_content {
border: 1px solid #472b1d;
background-color: #ebe7db;
color: #472b1d;
width: 99%;
}
.post_panel {
position: relative;
top: 10px;
left: 0px;
height: 200px;
width: 87.5%;
background-color: #d2c195;
margin-bottom: 50px;
}
.post_panel img {
position:relative;
width: 30px;
height: 20px;
}
.upload_video_and_picture {
position:relative;
top: 8px;
left: 10px;
}
.upload_video_and_picture_post_text {
position:relative;
top: -20px;
left: 50px;
}
.feeling {
position:relative;
top: 8px;
left: 10px;
}
.feeling img {
position:relative;
top: -21px;
left:100px;
}
this is the the css code where the background color doesn't seems to respond
.post {
position: relative;
top: 20px;
left: 220px;
padding-bottom: -200px;
margin-bottom: 120px;
width: 48%;
background-color: #d2c195;
}
.post > .fake_background_post {
background-color: #d2c195;
}
.post_text {
position: relative;
top: -23px;
left: 110px;
font-size: 70%;
# background-color: #d2c195;
}
.fake_background_post {
position: relative;
width: 100%;
height: 70px;
height: 33px;
left: 0px;
top: 00px;
background-color: #d2c195;
margin-bottom: 10px;
border: 2px solid #472b1d;
border-radius: 20px;
transition: 0.5s;
}
.fake_background_post:hover {
background-color: #472b1d;
color: #d2c195;
}
so I found this cool JQuery fader which does exactly what I wanted. The background fades, but when the transistion from image to image occurs all my other divs hide and then show basically.
I want to make it so only the background image will fade and the divs won't essentially flicker. I can produce a short video if need be.
HTML and JQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function fader() {
$("img").first().appendTo('#wrap').fadeOut(3000);
$("img").first().fadeIn(3000);
setTimeout(fader, 4200);
}
</script>
</head>
<body onLoad="fader();">
<div id="wrap">
<img src="images/Blue.png">
<img src="images/Green.png">
<img src="images/Orange.png">
<img src="images/Pink.png">
<img src="images/Purple.png">
<img src="images/Red.png">
<img src="images/Yellow.png">
<div id="wrapper">
<div id="header">
<div id="sv_title">Title</div>
<div id="sv_subtitle">Subtitle</div>
</div>
<div id="content_left">
<div id="text">
Lorem ipsum
</div>
</div>
<div id="content_right">
<div id="text">
Lorem ipsum
</div>
</div>
<div id="footer">
</div>
</div>
</div>
</body>
CSS:
html { overflow-x: hidden; overflow-y: hidden; }
img{
position:absolute;
top:0;
display:none;
width:1920px;
height:1080px;
border: none;
}
body{
margin: 0;
padding: 0;
}
#wrap {
margin: 0;
padding: 0;
}
/* End Setup */
/* Detail */
#wrapper {
height: 700px;
width: 900px;
opacity: 1.0;
bottom: 0;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
}
#header {
height: 100px;
width: 900px;
background-color: #000000;
opacity: 0.7;
}
#content_left {
height: 500px;
width: 445px;
background-color: #000000;
opacity: 0.7;
display: inline;
float: right;
margin-top: 10px;
}
#content_right {
height: 500px;
width: 445px;
background-color: #000000;
opacity: 0.7;
display: inline;
float: left;
margin-top: 10px;
}
#footer {
height: 50px;
width: 900px;
background-color: #000000;
opacity: 0.7;
position: absolute;
bottom: 0;
margin-bottom: 30px;
}
this should do the job:
function fader() {
$("#background img:first").appendTo('#background').fadeOut(3000);
$("#background img:first").fadeIn(3000);
setTimeout(fader, 4200);
}
and the fix in the html
<div id="wrap">
<span id="background">
<img src="images/Blue.png">
<img src="images/Green.png">
<img src="images/Orange.png">
<img src="images/Pink.png">
<img src="images/Purple.png">
<img src="images/Red.png">
<img src="images/Yellow.png">
</span>
<div id="wrapper">
<!-- and the rest of the markup -->
it's not tested, I'm to lazy at the moment to create a fiddle and mock your images.