Mouse Hover on Slider not working to show another image - javascript

I'm having some problem with the slider. I have using this slider on WordPress page with custom plugin that allow to add html/css/js after an update I have lost a script so I can't find.
The problem is this normally is an image without color, but on hover I want to show the original image with color, pagination is working well, so next image need to be shown without color. I will share the code that I have with missing js for hover to show other image.
As you can see I have 2 links
<img src="https://www.pika.com.mk/wp-content/uploads/2021/01/slider_1_1-1.jpg" />
first line for slider that is normally shown
<img src="https://www.pika.com.mk/wp-content/uploads/2021/01/slider_1_2-1.jpg" />
second line for the slider that need to be shown only on mouse hover
var swiper = new Swiper('.swiper-container', {
spaceBetween: 30,
centeredSlides: true,
// autoplay: {
// delay: 2500,
// disableOnInteraction: false
// },
autoplay: false,
pagination: {
el: '.swiper-pagination',
clickable: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
});
$(".swiper-container").mouseenter(function() {
swiper.autoplay.start();
});
$(".swiper-container").mouseleave(function() {
swiper.autoplay.stop();
});
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/js/swiper.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/css/swiper.css" />
<div class="slider-comp core-slider">
<div class="core-slider__info">
<div class="core-slider__arrows">
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
<div class="core-slider__images">
<div class="custom-swiper swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<div class="aspect-ratio">
<img src="https://www.pika.com.mk/wp-content/uploads/2021/01/slider_1_1-1.jpg" />
<img src="https://www.pika.com.mk/wp-content/uploads/2021/01/slider_1_2-1.jpg" />
</div>
</div>
<div class="swiper-slide">
<div class="aspect-ratio">
<img src="https://www.pika.com.mk/wp-content/uploads/2021/01/slider_2_1-1.jpg" />
<img src="https://www.pika.com.mk/wp-content/uploads/2021/01/slider_2_2-1.jpg" />
</div>
</div>
<div class="swiper-slide">
<div class="aspect-ratio">
<img src="https://www.pika.com.mk/wp-content/uploads/2021/01/slider_3_1-1.jpg" />
<img src="https://www.pika.com.mk/wp-content/uploads/2021/01/slider_3_2-1.jpg" />
</div>
</div>
<div class="swiper-slide">
<div class="aspect-ratio">
<img src="https://www.pika.com.mk/wp-content/uploads/2021/01/slider_4_1-1.jpg" />
<img src="https://www.pika.com.mk/wp-content/uploads/2021/01/slider_4_2-1.jpg" />
</div>
</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
</div>


You could add a class to the img-tags and add the styles for the hover-effect. Hide the hover image as default. If you hover on the div around the images, hide the default image and show the other one.
.hover_img{display: none;}
.aspect-ratio:hover .hover_img{
display: block;
}
.aspect-ratio:hover .standard_img{
display: none;
}
<div class="aspect-ratio">
<img class="standard_img" src="https://www.pika.com.mk/wp-content/uploads/2021/01/slider_1_1-1.jpg" />
<img class="hover_img" src="https://www.pika.com.mk/wp-content/uploads/2021/01/slider_1_2-1.jpg" />
</div>
You could also place the hover-image absolute above the standard image and add some effects.

Related

How to add play button inside responsive slide

I have a set of images to display using a responsive slide. I found a link to create responsive slide: http://responsiveslides.com. I don't know to add pause/play button inside the slide. My code is as follows:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="../responsiveslides.min.js"></script>
<script>
$("#slider4").responsiveSlides({
auto: true,
pager: false,
pauseControls:true,
nav: true,
pause: false,
speed: 500,
namespace: "callbacks",
before: function () {
$('.events').append("<li>before event fired.</li>");
},
after: function () {
$('.events').append("<li>after event fired.</li>");
}
});
});
</script>
</head>
<body>
<div id="wrapper">
<a class="pause_slider" href="#">Pause Slider</a>
<a class="play_slider" href="#">Play Slider</a>
<div class="callbacks_container">
<ul class="rslides" id="slider4">
<li>
<img src="images/1.jpg" alt="">
<p class="caption">This is a caption</p>
</li>
<li>
<img src="images/2.jpg" alt="">
<p class="caption">This is another caption</p>
</li>
<li>
<img src="images/3.jpg" alt="">
<p class="caption">The third caption</p>
</li>
</ul>
</div>
The above is the source code. How can I add pause and play button into my slide?

Do you necessarily have to use that library or can you listen to another option?
I recommend you swiper. It is a better library in my opinion. Here is the get-started link.
In this example you can change the value of the boolean autoplay with methods start() (to autoplay the slider) and stop() (to pause it).
Here you have an example. Hope it helps:
$(document).ready(function() {
new Swiper('.swiper-container', {
speed: 600,
spaceBetween: 90,
autoplay: true,
disableOnInteraction: true,
loop: true
});
const mySwiper = document.querySelector('.swiper-container').swiper;
let isSliderActive = true;
$("#slider-control").click(function() {
if (isSliderActive) {
mySwiper.autoplay.stop();
isSliderActive = false;
this.innerHTML = 'PLAY';
console.log('slider stopped');
} else {
mySwiper.autoplay.start();
isSliderActive = true;
this.innerHTML = 'PAUSE';
console.log('slider activated');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/css/swiper.css" rel="stylesheet" />
<style>
.swiper-slide { text-align: center; }
</style>
<div class="swiper-container">
<!-- required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<img src="https://place-hold.it/100x100">
<div>Slide 1</div>
</div>
<div class="swiper-slide">
<img src="https://place-hold.it/100x100">
<div>Slide 2</div>
</div>
<div class="swiper-slide">
<img src="https://place-hold.it/100x100">
<div>Slide 3</div>
</div>
</div>
</div>
<button id="slider-control">PAUSE</button>

If you can use another plug-in. wow slider You will get by default pause and play buttons.

Jquery slider is not working when hosted on server but working perfect in local. Why?

Jquery slider is not working when hosted on server but working perfect in local. Why? i uploaded all the source content to my website.
here is the hosted link of my website
navarangtravels.com/jq/jq
Kindly point the error
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!-- DC Dream Accordion CSS -->
<link rel="stylesheet" type="text/css" href="dream-accordion.css" />
<!-- DC Javascript Library -->
<script type="text/javascript" src="dcodes/jquery.min.js"></script><!-- jQuery Library (do not call twice on same page) -->
<script type="text/javascript" src="dcodes/jquery.easing.js"></script><!-- jQuery Easing (do not call twice on same page) -->
<!-- DC Dream Accordion JS -->
<script type="text/javascript" src="js/froogaloop.min.js"></script>
<script type="text/javascript" src="js/jquery.transform-0.9.3.min.js" ></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/jquery.getimagedata.min.js"></script>
<script type="text/javascript" src="js/dream-accordion.js"></script>
<!-- DC Dream Accordion Settings -->
<script type="text/javascript">
// SETTINGS
var as_settings = {
/* visibleItems: less of equal to total items in acordion */
visibleItems:5,
/* slideshowOn; true, false */
slideshowOn: true,
/* useGlobalDelay; true, false (use same timer delay for all slides, if false you NEED to set individual delays for all slides) */
useGlobalDelay: true,
/* slideshowDelay; slideshow delay, in miliseconds (2500 = 2.5 seconds) */
slideshowDelay: 2500,
/* randomPlay; true, false (play slides in normal or random order or to be more accurate, if true - mixes slide order on the beginning to simulate random) */
randomPlay: false,
/* includeVideoInSlideshow; autoplay video if exist in slide and on video finish continue with next slide (true/false) */
includeVideoInSlideshow: false,
/* openOnRollover; true, false (open slides on rollover or click) */
openOnRollover: true,
/* useScroll; true, false */
useScroll: true,
/* scrollDraggerOverColor; scroll dragger color on mouse over */
scrollDraggerOverColor: '#658',
/* useControls; true/false */
useControls: true,
/* openSlideNum; open slide on begining, enter -1 for none, 0 = first, 1 = second, 2 = third... etc. */
openSlideNum: 0,
/* transitionTime: transition time for slide in miliseconds */
transitionTime: 1000,
/* transitionEase: transition ease for slide, (some eases may possibly not work correctly), check eases here: http://gsgd.co.uk/sandbox/jquery/easing/ */
transitionEase: 'easeOutQuint'
};
jQuery(window).load(function() {
jQuery.noConflict();
jQuery.accordionSlider('#sliderWrapper', as_settings);
as_settings = null;
//after div holder (#gmap_canvas) for google map is ready in the dom, otherwise we get an error in ie coming from google maps.
//google.maps.event.addDomListener(window, 'load', initialize);
initializeGmap();
});
/*
https://developers.google.com/maps/documentation/javascript/reference
google map example
*/
var gmap;
function initializeGmap() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(48.856614, 2.3522219), // google map location to show
mapTypeId: google.maps.MapTypeId.ROADMAP
};
gmap = new google.maps.Map(document.getElementById('gmap_canvas'),
myOptions);
}
</script>
</head>
<body>
<!-- DC Dream Accordion Start -->
<div style="width:980px; margin:0 auto; padding:10px; position:relative;"> <!-- define slider container width (strict enforce) -->
<div id="sliderWrapper">
<div class="sliderCointainer">
<div class="sliderHolder">
<!-- Slide 1 -->
<div class='slideDiv' data-width='500' data-content='' data-link='http://www.google.com' data-target='_blank' data-delay='3000'> <img class='stack_img' src='images/pamban.jpg' width='500' height='333' alt='' />
<p data-title='title' class="-90,bl,10,10" data-background-color="rgba(51,51,51, 0.6)" data-color="#ffffff">Rameswaram</p>
<p data-title='caption' class="50,200" data-background-color="rgba(51,51,51, 0.6)" data-color="#ffffff">The India's Holiest Place</p>
<p data-title='caption' class="50,250" data-background-color="rgba(51,51,51, 0.3)" data-color="#ffffff"> <a style="text-decoration:none" href="#" target="_blank">The longest corridor among all Hindu temples in India</a></p>
</div>
<!-- Slide 2 -->
<div class='slideDiv' data-width='500' data-content='' data-link='' data-delay='5000'> <img class='stack_img' src='images/madurai.jpg' width='500' height='333' alt='' />
<p data-title='title' class="-90,bl,10,10" data-background-color="rgba(153,204,0, 0.6)" data-color="#ffffff">Madurai</p>
<p data-title='caption' class="50,250" data-background-color="rgba(153,204,0, 0.6)" data-color="#ffffff">The Temple City</p>
</div>
<!-- Slide 3 -->
<div class='slideDiv' data-width='500' data-content='' data-link='FG0fTKAqZ5g' data-delay='3000'> <!-- data-link: add youtube video id here -->
<img class='stack_img' src='images/mahal.jpg' width='500' height='333' alt='' />
<p data-title='title' class="-90,bl,10,10" data-background-color="rgba(204,0,0, 0.6)" data-color="#ffffff">Madurai</p>
<p data-title='caption' class="50,50" data-background-color="rgba(204,0,0, 0.6)" data-color="#ffffff">Thirumalai Nayakar Mahal</p>
<p data-title='caption' class="50,250" data-background-color="rgba(51,51,51, 0.6)" data-color="#ffffff">Classic fusion of Dravidian, Islamic styles</p>
</div>
<!-- Slide 4 -->
<div class='slideDiv' data-width='500' data-content='' data-link='4749536' data-delay='3000'> <!-- data-link: add vimeo video id here -->
<img class='stack_img' src='images/kodai.jpg' width='500' height='333' alt='' />
<p data-title='title' class="-90,bl,10,10" data-background-color="rgba(0,153,204, 0.6)" data-color="#ffffff">Kodaikanal</p>
<p data-title='caption' class="50,50" data-background-color="rgba(0,153,204, 0.6)" data-color="#ffffff">Princess of Hill stations</p>
<p data-title='caption' class="50,250" data-background-color="rgba(51,51,51, 0.6)" data-color="#ffffff">Kodaikanal</p>
</div>
<!-- Slide 5 -->
<div class='slideDiv' data-width='500' data-content='image' data-link='' data-target='' data-delay='3000' > <img class='stack_img' src='images/kutralam.jpg' width='500' height='333' alt='' />
<p data-title='title' class="-90,bl,10,10" data-background-color="rgba(255,102,0, 0.6)" data-color="#ffffff">Courtallam</p>
<p data-title='caption' class="50,250" data-background-color="rgba(51,51,51, 0.6)" data-color="#ffffff">The Numerous Waterfalls & Cascades</p>
</div>
<!-- Slide 6 -->
<div class='slideDiv' data-width='500' data-content='' data-link='' data-target='' data-delay='3000'> <img class='stack_img' src='images/ooty.jpg' width='500' height='333' alt='' />
<p data-title='title' class="-90,bl,10,10" data-background-color="rgba(94,73,188, 0.6)" data-color="#ffffff">Ooty</p>
<p data-title='caption' class="50,50" data-background-color="rgba(51,51,51, 0.6)" data-color="#ffffff">A Place you will love the Most</p>
</div>
<!-- Slide 7 -->
<div class='slideDiv' data-width='500' data-content='' data-link='' data-target='' data-delay='3000'> <img class='stack_img' src='images/kany.jpg' width='500' height='333' alt='' />
<p data-title='title' class="-90,bl,10,10" data-background-color="rgba(4,4,4, 0.6)" data-color="#ffffff">Kanyakumari</p>
<p data-title='caption' class="50,200" data-background-color="rgba(128,128,128, 0.6)" data-color="#ffffff">Southernmost tip of India</p>
<p data-title='caption' class="50,250" data-background-color="rgba(91,91,91, 0.6)" data-color="#ffffff"><a style="text-decoration:none" href="http://www.bing.com" target="_blank">Thiruvalluvar Statue, Vivekananda Rock Memorial</a></p>
</div>
</div>
<!-- /sliderHolder -->
</div>
<!-- /sliderCointainer -->
<!-- accordion controls -->
<!--<div class="controls">
<div class="controls_prev"><img src='dcodes/sliders/dream-accordion/data/icons/controls_prev.gif' width='9' height='13' alt='controls_prev'/></div>
<div class="controls_toggle"><img src='dcodes/sliders/dream-accordion/data/icons/controls_play.gif' width='9' height='13' alt='controls_toggle'/></div>
<div class="controls_next"><img src='dcodes/sliders/dream-accordion/data/icons/controls_next.gif' width='9' height='13' alt='controls_next'/></div>
</div>-->
<!-- accordion scroll -->
<!--<div class="scroll">
<div class="scrollTrack"></div>
<div class="scrollBar"></div>
</div>-->
<div class="fontMeasure">a</div>
<!-- preloader
<div class="mediaPreloader"></div>-->
</div>
<!-- /sliderWrapper -->
</div>
<!-- DC Dream Accordion End -->
<div class="dc_clear"></div>
<!-- line break/clear line -->
</body>
</html>

I'm getting HTTP Error 503 (Service Unavailable) - basically the server is simply not available right now. That means some of your files are not being downloaded.
You probably want to check the server to make sure it's working properly.
To check for errors in Chrome: right click on your page > Inspect element

Not rendering masonry layout

I am trying to build a masonry page with some images. here is my code
CSS
<style>
.masonryImage{float:left;}
</style>
JavaScript
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<!--<script src="<?=base_url('assets/js/bootstrap.min.js')?>"></script>-->
<script src="<?=base_url('masonry/masonry.min.js')?>"></script>
<script src="<?=base_url('masonry/masonry.js')?>"></script>
<script type="text/javascript">
var container = $('#container');
container.imagesLoaded( function(){
container.masonry({
itemSelector : '.masonryImage'
});
});
</script>
HTML
<body id="container" style="height:100%;width:100%;background-color:#309be9;">
<div class="masonryImage">
<img src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-Playing-fetch.jpg" alt="">
</div>
<div class="masonryImage">
<img src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-Polar-bear.jpg" alt="">
</div>
<div class="masonryImage">
<img src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-precious.jpg" alt="">
</div>
<div class="masonryImage">
<img src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-baby-penguin.....jpg" alt="">
</div>
<div class="masonryImage">
<img src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-And-just-because-well-just-because-we-CAN.jpg" alt="">
</div>
<div class="masonryImage">
<img src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-Bunnies-and-flowers...jpg" alt="">
</div>
<div class="masonryImage">
<img src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-captionme.jpg" alt="">
</div>
<div class="masonryImage">
<img src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-Its-mum-is-called-Alinga..jpg" alt="">
</div>
<div class="masonryImage">
<img src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-Curious-bobcat-cub-by-Megan-Lorenz.jpg" alt="">
</div>
</body>
I dint understand where the bug is, the page is not rendering in mansory style.
please suggest.
UPDATE:
After trying the two suggested javascripts the images started overlapping . Actually the code itself is not responsible for this. But something is going wrong with masonry. here is the screen shot
If you notice clearly i highlighted with a red mark, it shows some of the images and hiding!!
Ahh this is playing with me
If i try inspect element, the images are returning to their position
Too puzzeled

I don't see an initialization of Masonny in your code:
$(document).ready(function (){
var $container = $('#container');
$container.masonry({
columnWidth: 200,
itemSelector: '.masonryImage'
});
})

Check if your js is properly called.
Either use masonry.min.js or masonry.js it's good to use masonry.min.js if your are deploying.
To check if your js is called properly, view source and open the js link or place a simple alert inside your js.
EDIT: You seem to use imagesloaded which is not part of mansory, but can be used with mansory. If you want to initiate masonry, you have to replace your code with
$( document ).ready(function() {
$('#container').masonry({
columnWidth: 200,
itemSelector: '.item'
});
});
or with your current code you have to add imagesloaded.js

Bootstrap Carousel pause

I'm super new at this so please be gentle.
I'm trying to use the bootstrap carousel plugin and have a different div section display when each slide changes. I found a good example but unfortunately I can't figure out how to get it to pause.
<html>
<head>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-carousel.js"></script>
<style>
.carousel {
width: 80%;
margin-left: auto;
margin-right: auto;
}
</style>
<title>testapp</title>
</head>
<body>
<div id="msg"></div>
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="http://i.microsoft.com/global/en-us/homepage/PublishingImages/sprites/microsoft_gray.png" />
</div>
<div class="item">
<img src="http://www.google.com.pk/ig/images/jfk/google_black.png" />
</div>
<div class="item">
<img src="http://www.google.com.pk/ig/images/jfk/google_black.png" />
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
<div class="row">
<div class="offset2">
<div>Microsoft: *** index 0 ***</div>
<div>Google: *** index 1 ***</div>
<div>Google: *** index 2 ***</div>
</div>
</div>
</body>
</html>
JS
function msg(m) {
$("#msg").text(m);
}
$('#myCarousel').carousel({
interval: 5000
});
var carouselTexts = $(".row .offset2 div");
$('#myCarousel').on('slid', function(event) {
var idx = $(event.target).find('.carousel-inner .active').index();
carouselTexts.hide().eq(idx).show();
}).trigger('slid');
http://jsfiddle.net/ymwL5/2/
When I add "Pause: "hover" below the interval: 5000 line the Divs stop to rotate and the hide section completely breaks.
Any help would be appreciated.

The carousel should pause on hover by default so you shouldn't need that option. I think you are missing a comma after the "interval: 5000" option. Try:
interval: 5000,
pause: "hover"

Content Slider - issue with JQuery

I am trying to use the demo from this site : http://slidesjs.com/#overview
and try to implement two slider on a page. I am customising the Linking demo.
As i am using two different slider : slider1 and slider2 with different css so I used global.css for slider-1 and created text.css for slider-2. i noticed that the js: slides.min.jquery.js file uses the 'css' element like slides_container, next, prev so i created another js :slider.text.jquery.js replacing the css content by: slides_containerT, nextT, prevT as per text.css. but the code is not working. please help me as my project is due next monday.
Please help to resolve the isse and let me know if more detail is required.
Sorry I tried to add the html, css and jquery code but i was encountering error.
Can you please suggest how what changes I should make to the js : slides.min.jquery.js
so that it renders my second slider with css content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo</title>
<link rel="stylesheet" href="css/new.css">
<link rel="stylesheet" href="css/text.css">
<script src="js/slider/jquery.min.js"></script>
<script src="js/slider/slides.min.jquery.js"></script>
<script src="js/slider/slider.text.jquery.js"></script>
<script>
$(function(){
// Set starting slide to 1
var startSlide = 1;
// Get slide number if it exists
if (window.location.hash) {
startSlide = window.location.hash.replace('#','');
}
// Initialize Slides 1
$('#slides1').slides({
preload: true,
preloadImage: 'img/slider/loading.gif',
generatePagination: true,
play: 5000,
pause: 2500,
hoverPause: true,
// Get the starting slide
start: startSlide,
animationComplete: function(current){
// Set the slide number as a hash
window.location.hash = '#' + current;
}
});
// Initialize Slides 2
$('#slides2').slides({
preload: true,
preloadImage: 'img/slider/loading.gif',
generatePagination: true,
play: 5000,
pause: 2500,
hoverPause: true,
// Get the starting slide
start: startSlide,
animationComplete: function(current){
// Set the slide number as a hash
window.location.hash = '#' + current;
}
});
});
</script>
<div id="container">
<div id="example">
<div id="slides1">
<div class="slides_container">
<div class="slide">
<img src="img/slider/slide-1.jpg" height="150" style="max-width: 200px" alt="Slide">
<div class="tmpSlideCopy">
<h1>A History of Innovation</h1>
<p>SLIDE 1 </p>
</div>
</div>
<div class="slide">
<img src="img/slider/slide-2.jpg" height="150" style="max-width: 230px" alt="Slide">
<div class="tmpSlideCopy">
<h1>Second Slide</h1>
<p>Slide 2</p>
</div>
</div>
<div class="slide">
<img src="img/slider/slide-3.jpg" height="150" style="max-width: 230px" alt="Slide">
<div class="tmpSlideCopy">
<h1>Third Slide</h1>
<p>Slide 3</p>
</div>
</div>
</div>
<img src="img/slider/arrow-prev.png" width="24" height="43" alt="Arrow Prev">
<img src="img/slider/arrow-next.png" width="24" height="43" alt="Arrow Next">
cheers
pam

You can try this below code.
$(function(){
$("#slides").slides({
container: 'slides_container'
});
});
Where container is the "css" style.
.slides_container {
width:570px;
height:270px;
}
More information on various property and styling at http://slidesjs.com/#docs

Categories

Resources