I have auto-moving images as a slideshow.
Here's my code in CodePen:
https://codepen.io/Krzysiek_39/pen/poNLbgx
On my code, instead of the left arrow, I have "previous" and instead of the right arrow I have "next". Unfortunately, I don't like the round backgrounds with the words "previous" and "next".
Instead of the words "previous" (including the blue circular background) and the words "next" (including the red circular background) - I would like to have normal arrows (from another slideshow) in place of "previous" and "next".
Here is another slideshow with normal arrows:
https://www.jqueryscript.net/demo/Responsive-Infinite-jQuery-Carousel-Slider-Plugin-LoopSlider/
Can I put these normal arrows (from another slideshow) in place of "previous" and "next"?
An important issue!
I would also like "cursor: pointer" to only work when hovering over these normal arrows.
I will be very grateful for effective help.
<div class="header">
<div class="text">
<a class="refresh" title="A website refresh">Website</a>
</div>
</div>
<div class="menu-container">
<div class="menu">
<a>MENU</a>
</div>
</div>
<div class="box">
<div class="slider_wrapper">
<div class="slider">
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?art" alt=""><span class="caption">Caption for slide 1</span>
</div>
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?action" alt=""><span class="caption">Caption for slide 2</span>
</div>
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?war" alt=""><span class="caption">Caption for slide 3</span>
</div>
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?crime" alt=""><span class="caption">Caption for slide 4</span>
</div>
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?drama" alt=""><span class="caption">Caption for slide 5</span>
</div>
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?sci-fi" alt=""><span class="caption">Caption for slide 6</span>
</div>
</div>
<div class="slider_objects">
<div class="slider_btn prev_btn">previous</div>
<div class="slider_btn next_btn">next</div>
<ul class="slider_list_wrapper">
<li class="slider_list active_slide"></li>
<li class="slider_list"></li>
<li class="slider_list"></li>
<li class="slider_list"></li>
<li class="slider_list"></li>
<li class="slider_list"></li>
</ul>
</div>
</div>
</div>
You can modify the styles to remove the round background and add HTML entity for the arrows:
HTML
<div class="slider_btn prev_btn">‹</div>
<div class="slider_btn next_btn">›</div>
CSS
.prev_btn, .next_btn {
font-size:4em;
position: absolute;
cursor: pointer;
color: #ffffff;
background:0;
}
.prev_btn {
left: 50px;
}
.next_btn {
right: 50px;
}
Related
Can anyone help me in achieving the following carousel (train carousel) effect using grid and cards in MaterializeCSS. I have tried many solutions, but I'm unable to achieve desired results.
Here is what I have achieved so far: https://jsfiddle.net/c5mq2ezo/1/ (sorry for the images inside the link)
But the problem is I need to create train carousel effect with any number of grids/cards available. Right now it gives unexpected results in visible slide. If I add 4 or 5 cards, it only displays 3 instead of 4. If I add 7 or 8 cards then it displays 4 cards as it should.
Following is the code:
<body class="grey darken-3">
<section>
<div class="carousel carousel-slider">
<a class="carousel-item black-text" href="#one">
<div class="card">
<div class="card-image">
<img src="images/samples/insurance.png">
</div>
<div class="card-content">
<h6>Insurance</h6>
<p>Adjusters have photos of cars damaged in accidents; these images, however, are not helping prevent...</p>
</div>
</div>
</a>
<a class="carousel-item black-text" href="#two">
<div class="card">
<div class="card-image">
<img src="images/samples/manufucturing.png">
</div>
<div class="card-content">
<h6>Manufucturing defects</h6>
<p>Production lines are often equipped with cameras, but it can be challenging to infer quality or safety problems...</p>
</div>
</div>
</a>
<a class="carousel-item black-text" href="#three">
<div class="card">
<div class="card-image">
<img src="images/samples/retail.png">
</div>
<div class="card-content">
<h6>Retail</h6>
<p>Recommend products that match your customers' style, analyze reviews or survey data for topics and trends</p>
</div>
</div>
</a>
<a class="carousel-item black-text" href="#three">
<div class="card">
<div class="card-image">
<img src="images/samples/retail.png">
</div>
<div class="card-content">
<h6>Content filtering</h6>
<p>Adjusters have photos of cars damaged in accidents; these images, however, are not helping prevent future ...</p>
</div>
</div>
</a>
<a class="carousel-item black-text" href="#three">
<div class="card">
<div class="card-image">
<img src="images/samples/retail.png">
</div>
<div class="card-content">
<h6>Card 5</h6>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
</div>
</a>
</div>
</section>
</body>
CSS:
.carousel .carousel-item {
width: 340px !important;
padding: 20px;
}
.card{
border-radius: 8px;
position: relative !important;
right: 20px !important;
}
Actually you can add the cards to the carousel adding the class carousel-item to the card and not using the a tag:
<div class="carousel ">
<div class="card carousel-item">
<div class="card-content">
<span class="card-title">Card 1</span>
Card 1 content
</div>
</div>
<a class="carousel-item" href="#one!"><img src="https://lorempixel.com/250/250/nature/1"></a>
<a class="carousel-item" href="#two!"><img src="https://lorempixel.com/250/250/nature/2"></a>
<a class="carousel-item" href="#three!"><img src="https://lorempixel.com/250/250/nature/3"></a>
<a class="carousel-item" href="#four!"><img src="https://lorempixel.com/250/250/nature/4"></a>
<a class="carousel-item" href="#five!"><img src="https://lorempixel.com/250/250/nature/5"></a>
</div>
View in browser
The issue is when you add the picture because the pic uses all the space and the content is displayed below the carousel, maybe with some styles it could be fixed, I don't know too much about CSS.
Hope this be helpful.
In my html, there are 2 tabs once you click on a tab the other tab is hidden, while the one that is clicked on is shown, It's a normal javascript tab interface.
I have a gallery plugin, it shows the gallery of the image in the first div, but it doesn't work for the image in the second div, even after i have hidden the image in the first div and it works based on the id as light gallery, Please why doesn't it show the gallery of the second image and how can i solve this issue
This is my html
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.11/js/lightgallery-all.min.js"></script>
<li id="tabs1" onclick="showStuff(this)" class="active pic-list"><a href="#all" > All (35)</a></li>
<li id="tabs2" onclick="showStuff(this)" class="pic-list"></i></li>
<div id="tabs-1" class="tabContent" style="display: block;">
<div class="row" id="lightgallery">
#if(isset($images))
#foreach ($images as $image)
<div class="col-md-3 col" style="margin-bottom: 15px" data-src="{{$image->filename}}">
<div class="img-con" id="{{$image->id}}">
<a href="">
<img class="mb-2 uploaded-photos" src="{{$image->filename}}" alt="">
</a>
<div class="img-select">
<div class="new gvs-title">
<span style="color: #333333;">{{$image->description}} <i class="fa fa-upload" style="margin-left: 10px; color:#333333;"></i> <br/></span>
</div>
</div>
</div>
</div>
#endforeach
#endif
</div>
</div>
<div id="tabs-2" class="tabContent">
<div class="row" id="lightgallery">
#if(isset($images))
#foreach ($images as $image)
<div class="col-md-3 col" style="margin-bottom: 15px" data-src="{{$image->filename}}">
<div class="img-con" id="{{$image->id}}">
<a href="">
<img class="mb-2 uploaded-photos" src="{{$image->filename}}" alt="">
</a>
<div class="img-select">
<div class="new gvs-title">
<span style="color: #333333;">{{$image->description}}080808008080 <i class="fa fa-upload" style="margin-left: 10px; color:#333333;"></i> <br/></span>
</div>
</div>
</div>
</div>
#endforeach
#endif
</div>
</div>
This is my jquery code
$(document).ready(function(){
$('#lightgallery').lightGallery();
});
I solved this by basically calling two light gallery functions and changing the id of the 2 divs i.e lightgallery and lightgallery1
$(document).ready(function(){
$('#lightgallery').lightGallery();
$('#lightgallery1').lightGallery();
});
I have an OwlCarousel with nav links within the first slide, is there a way to make the carousel return to the first slide after an event, be it a timer, or when the mouse moves out of the carousel?
Is it also possible to trigger the carousel with mousing over a link rather than clicking it?
Code snippet:
<div class="owl-carousel">
<div class="item" data-hash="slide0">
<ul>
<li><a class="button secondary url" href="#slide1">1</a></li><br/>
<li><a class="button secondary url" href="#slide2">2</a></li><br/>
<li><a class="button secondary url" href="#slide3">3</a></li><br/>
<li><a class="button secondary url" href="#silde4">4</a></li><br/>
<li><a class="button secondary url" href="#slide5">5</a></li><br/>
<li><a class="button secondary url" href="#slide6">6</a></li><br/>
</ul>
</div>
<div class="item" data-hash="slide1">
//some image
</div>
<div class="item" data-hash="slide2">
//some image
</div>
<div class="item" data-hash="slide3">
//some image
</div>
<div class="item" data-hash="slide4">
//some image
</div>
<div class="item" data-hash="slide5">
//some image
</div>
<div class="item" data-hash="slide6">
//some image
</div>
</div>
According the owlCarousel's docs you can use the to.owl.carousel function to slide to specific position.
Here is an example for both - going to the first slide (slides numbering starts with 0) and hover on the li elements to go to a specific slide on hover.
var owl;
$(document).ready(function(){
owl = $(".owl-carousel").owlCarousel({items:1});
$('#btn1').click(function() {
owl.trigger('to.owl.carousel', [0, 400]);
});
$('#ul1 li').hover(function() {
owl.trigger('to.owl.carousel', [parseInt($(this).text()) - 1, 400]);
});
});
body {
margin: 0;
padding: 0;
}
.owl-carousel .item {
height: 120px;
background: #4DC7A0;
padding: 1rem;
list-style: none;
margin: 10px;
text-align: center;
color: white;
font-size: 20px;
line-height: 120px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.carousel.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.theme.default.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/owl.carousel.min.js"></script>
<!-- Set up your HTML -->
<div class="owl-carousel">
<div class="item"> slide1 </div>
<div class="item"> slide2 </div>
<div class="item"> slide3 </div>
<div class="item"> slide4 </div>
<div class="item"> slide5 </div>
<div class="item"> slide6 </div>
<div class="item"> slide7 </div>
<div class="item"> slide8 </div>
<div class="item"> slide9 </div>
<div class="item"> slide10 </div>
<div class="item"> slide11 </div>
<div class="item"> slide12 </div>
</div>
<button id="btn1">Go to first</button>
<ul id="ul1">
<li>1</li>
<li>5</li>
<li>10</li>
</ul>
Do you have any idea why the page shifts upward when I click the arrows (the slideshow navigators arrows) down at the bottom?
It's been bugging me for a while now.
HTML
<div class="slideshow ">
<div class="slides">
<img class ="slide active-slide" src="http://gearnuke.com/wp-content/uploads/2015/06/GTA-5.jpg">
<img class ="slide" src="http://cdn.wegotthiscovered.com/wp-content/uploads/gta5.jpg">
<img class ="slide" src="http://www.igta5.com/images/official-artwork-trevor-yellow-jack-inn.jpg">
<img class ="slide" src="http://cdn2.knowyourmobile.com/sites/knowyourmobilecom/files/styles/gallery_wide/public/0/67/GTAV-GTA5-Michael-Sweatshop-1280-2277432.jpg?itok=nKEHENTW">
</div>
<div class="dots-container">
<ul class="slider-dots">
<a href="javascript:void(0);" class="arrow-prev" ><<</a>
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<a href="javascript:void(0);" class="arrow-next" >>></a>
</ul>
</div>
CSS
.slideshow{
background-color:#000;
text-align:center;
width:100%;
position:relative;
}
/*image slides*/
.slides{
height:100%;
max-width:100%;
}
.slide{
display:none;
margin:2em;
max-width:70%;
max-height:100%;
}
.active-slide {
display:inline;
max-width:70%;
max-height:100%;
}
/*dots*/
.slider-dots{
text-align:center;
width:100%;
font-size:1.5em;
padding:1%;
}
.dots-container{
padding:1em;
}
.slider-dots li{
display:inline;
}
.arrow-prev, .arrow-next{
font-size:16px;
color:rgb(77, 151, 201);
margin-left:1.8em;
margin-right:1.8em;
font-weight:bold;
}
a.arrow-prev:hover, a.arrow-next:hover,a.arrow-prev:active, a.arrow-next:active
{
color:#fff;
text-decoration:none;}
.active-dot{
color:#fff;
}
I have read multiple threads, but it seems there's no concrete solution to this.
Here is the jsFiddle
For these two lines:
nextSlide.fadeIn(2300).addClass('active-slide').show();
currentSlide.fadeOut(2300).removeClass('active-slide').hide();
What's happening is you remove the tile, so the page shrinks... then you add one back in so it extends. However, when it shrinks, everything moves up to accommodate it. The experience you are getting is because it's happening faster then you can perceive.
Try either reversing the order:
currentSlide.fadeOut(2300).removeClass('active-slide').hide();
nextSlide.fadeIn(2300).addClass('active-slide').show();
Or if that causes flickering, giving the parent container an absolute height.
Just change the order and then force it to scroll to the bottom of the page in this way it will stay at the bottom
nextSlide.fadeIn(2300).addClass('active-slide').show();
currentSlide.fadeOut(2300).removeClass('active-slide').hide();
$(window).scrollTop($(document).height());
You can take a look at here http://jsfiddle.net/wvgqnzf9/
You have some errors in your jsfiddle, so if you fix it, you have working app. Fix it just add jquery and bootstrap.css in resource section
I've attached working fiddle
So html should be just:
<body>
<div class="nav navbar-fixed-top">
<div class="container">
<ul class="pull-left"> <li>Team</li>
<li>Learn more</li>
<li>Contact</li>
</ul>
<ul class="pull-right"> <li>Learn more</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h3>WELCOME TO SAN ANDREAS</h3>
<p>Prepare to make your dreams come true...
<p>
</div>
</div>
<div class="actors">
<span>TEAM</span>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="http://cdn2-b.examiner.com/sites/default/files/styles/image_content_width/hash/92/f5/92f51c2146c471daad1002221888f4d3.jpg?itok=MExy-qsb"> <span>MICHAEL</span>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="http://cdn2-b.examiner.com/sites/default/files/styles/image_content_width/hash/71/92/7192e2b9c8b6a24e3c9d824942799228.jpg?itok=LVyYEoB4"> <span>TREVOR</span>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="http://media.rockstargames.com/rockstargames/img/global/downloads/buddyiconsconavatars/v_franklin_256x256.jpg"> <span>FRANKLIN</span>
</div>
</div>
</div>
</div>
</div>
<div class="slideshow ">
<div class="slides">
<img class="slide active-slide" src="http://gearnuke.com/wp-content/uploads/2015/06/GTA-5.jpg">
<img class="slide" src="http://cdn.wegotthiscovered.com/wp-content/uploads/gta5.jpg">
<img class="slide" src="http://www.igta5.com/images/official-artwork-trevor-yellow-jack-inn.jpg">
<img class="slide" src="http://cdn2.knowyourmobile.com/sites/knowyourmobilecom/files/styles/gallery_wide/public/0/67/GTAV-GTA5-Michael-Sweatshop-1280-2277432.jpg?itok=nKEHENTW">
</div>
<div class="dots-container">
<ul class="slider-dots"> <<
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li> >>
Simple fix. set min-height of slides container.
.slides {
height: 100%;
max-width: 100%;
min-height: 500px; // set as per your requirement
}
Your slides are fadeing out meaning they are going out of DOM so causing a hole and reducing height of document and thats why its scrolling up and then next slide fadeing in. so you need to keep the container intact meanwhile, so have some fixed min height to it.
I just added a slider and carousel to my Volusion website homepage.
However, when I went to the page, the first carousel image would blow up to a huge size (original size is only 180 x 270) and flash twice. So I looked through the code and removed a line:
<script src="/v/vspfiles/templates/192/homepage/js/jquery.js" type="text/javascript"></script>
Because I thought maybe it's trying to load the javascript twice or something.
After I did this, the carousel image still blows up to a huge size on load, but only once.
Here is the page where it is happening on: http://www.wallsrepublic.com
All of the relevant code I have on my home page is below:
<script src="/v/vspfiles/templates/192/homepage/js/mobilyslider.js" type="text/javascript"></script>
<script src="/v/vspfiles/templates/192/homepage/js/init.js" type="text/javascript"></script>
For the main slider:
<link rel="stylesheet" href="http://www.wallsrepublic.com/v/slider/flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://www.wallsrepublic.com/v/Slider/jquery.flexslider.js"></script>`
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$(".flexslider").flexslider();
});
$(window).load(function() {
$(".flexslider").flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 5,
minItems: 2,
maxItems: 4
});
});
</script>
<div class="flexslider" style="width:auto;overflow:hidden;">
<ul class="slides">
<li>
<a href='http://www.wallsrepublic.com/home-wallpapers-online-s/1814.htm' ><img alt='Home Wallpaper' src="http://www.wallsrepublic.com/v/vspfiles/slider/slide1.jpg" height='452' width='975' border='0' /></a>
</li>
<li>
<a href='http://www.wallsrepublic.com/home-wallpapers-online-s/1814.htm'><img alt='Wallpaper Murals' src="http://www.wallsrepublic.com/v/vspfiles/slider/slide2-1.jpg" height='452' width='975' border='0' /></a>
</li>
<li>
<a href='http://www.wallsrepublic.com/home-wallpapers-online-s/1814.htm'><img alt='Wallpaper Sale' src="http://www.wallsrepublic.com/v/vspfiles/slider/slide3.jpg" height='452' width='975' border='0' /></a>
</li>
</ul>
</div>
For the problematic carousel:
<script src="http://wallsrepublic.com/v/carousel/amazingcarousel.js"></script>
<link rel="stylesheet" type="text/css" href="http://wallsrepublic.com/v/carousel/initcarousel-1.css">
<script src="http://wallsrepublic.com/v/carousel/initcarousel-1.js"></script>
<!-- PRODUCT CAROUSEL -->
<div id="amazingcarousel-container-1">
<div id="amazingcarousel-1" style="display:block;position:relative;width:100%;max-width:900px;margin:0px auto 0px;">
<div class="amazingcarousel-list-container">
<ul class="amazingcarousel-list">
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/gold-damask-wallpaper-p/r2067-parent.htm" title="GOLD DAMASK " ><img src="http://wallsrepublic.com/v/carousel/1.png" alt="GOLD DAMASK " /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">GOLD DAMASK </div>
<div class="amazingcarousel-description">$159 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/grey-overlay-wallpaper-p/s43712-parent.htm" title="GREY OVERLAY " ><img src="http://wallsrepublic.com/v/carousel/2.png" alt="GREY OVERLAY " /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">GREY OVERLAY </div>
<div class="amazingcarousel-description">$89 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/black-white-dogstooth-wallpaper-p/r2542-parent.htm" title="BLACK & WHITE DOGSTOOTH " ><img src="http://wallsrepublic.com/v/carousel/3.png" alt="BLACK & WHITE DOGSTOOTH " /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">BLACK & WHITE DOGSTOOTH </div>
<div class="amazingcarousel-description">$119 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/brown-fawn-wallpaper-p/r2339-parent.htm" title="BROWN FAWN " ><img src="http://wallsrepublic.com/v/carousel/4.png" alt="BROWN FAWN " /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">BROWN FAWN </div>
<div class="amazingcarousel-description">$139 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/R1373-p/r1373-parent.htm" title="SERENITY SAND" ><img src="http://wallsrepublic.com/v/carousel/5.png" alt="SERENITY SAND" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">SERENITY SAND</div>
<div class="amazingcarousel-description">$149 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/taupe-stone-modern-residential-wallpaper-R1875-p/r1875-parent.htm" title="BLOCK-STONE GREY" ><img src="http://wallsrepublic.com/v/carousel/6.png" alt="BLOCK-STONE GREY" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">BLOCK-STONE GREY</div>
<div class="amazingcarousel-description">$79 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/marsala-running-brick-wallpaper-p/r2587-parent.htm" title="MARSALA RUNNING BRICK" ><img src="http://wallsrepublic.com/v/carousel/7.png" alt="MARSALA RUNNING BRICK" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">MARSALA RUNNING BRICK</div>
<div class="amazingcarousel-description">$79 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/geometric-gold-residential-wallpaper-R1861-p/r1861-parent.htm" title="TIA GOLD" ><img src="http://wallsrepublic.com/v/carousel/8.png" alt="TIA GOLD" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">TIA GOLD</div>
<div class="amazingcarousel-description">$119 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/antique-world-map-mural-p/m9167-parent.htm" title="ANTIQUE WORLD MAP MURAL" ><img src="http://wallsrepublic.com/v/carousel/9.png" alt="ANTIQUE WORLD MAP MURAL" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">ANTIQUE WORLD MAP MURAL</div>
<div class="amazingcarousel-description">$399 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/blue-wood-pattern-residential-wallpaper-R1878-p/r1878-parent.htm" title="BRUSHED WOOD BLUE" ><img src="http://wallsrepublic.com/v/carousel/10.png" alt="BRUSHED WOOD BLUE" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">BRUSHED WOOD BLUE</div>
<div class="amazingcarousel-description">$89 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/black-and-white-lattice-wallpaper-p/r2548-parent.htm" title="BLACK & WHITE LATTICE" ><img src="http://wallsrepublic.com/v/carousel/11.png" alt="BLACK & WHITE LATTICE" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">BLACK & WHITE LATTICE</div>
<div class="amazingcarousel-description">$119 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/gold-victorian-wallpaper-p/s43751-parent.htm" title="GOLD VICTORIAN" ><img src="http://wallsrepublic.com/v/carousel/12.png" alt="GOLD VICTORIAN" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">GOLD VICTORIAN</div>
<div class="amazingcarousel-description">$149 USD</div>
</div> </div>
</li>
</ul>
<div class="amazingcarousel-prev"></div>
<div class="amazingcarousel-next"></div>
</div>
<div class="amazingcarousel-nav"></div>
</div>
</div>
I had the javascript and css files in my template header before, but then the slideshows did not work so I had to move them to be directly on the home page.
Any help would be appreciated.
$(window).load(function() {
$(".flexslider").flexslider();
});
Try to remove those lines, you are calling the slider 2 times for the same class.
I don't think it's an issue with Flexslider that's causing this.
As far as I can tell, it is caused by the wallpaper swatch displaying at 100% width before the amazing carousel plugin kicks in and wraps the image to a smaller width.
Try adding this to your stylesheet
.amazingcarousel-item {
float: left;
width: 150px;
}
This will give the carousel item a width by default, which in turn causes the image inside it to be a smaller width.