how to make the image slider work smoothly?

Hi,

Does anybody know how to make the image slide work smoothly? My site is  http://iradionortheast.com/

and I want to make it work like http://absoluteradio.co.uk/
jonathanduane2010Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
First link leads to a login page second does not seem to have an image slide ?
jonathanduane2010Author Commented:
Oh, My apologies.

I referred the attachment as the slider.
1111.PNG
Julian HansenCommented:
Still getting a password screen on the first link.
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

dwarak besantCommented:
Hi,

Step by Step process to embed Smooth Slider,

1. Upload and Activate the 'Smooth Slider' plugin from WordPress plugins dashboard
2. Add the posts,pages and/or media library images to the slider. You would get ‘Add to Smooth Slider’ checkbox on the edit panel (of post/page/image) after plugin activation.
3. Go to slider settings -> Change the height and width of the slides section, depending on your theme width. You can change other parameters like colors, borders, image size and image location etc.
4. Now you can insert the Smooth Slider on your WordPress site using either the template tag or the shortcode or the widget.

If you want to add the slider inside a page/post content, use the shortcode.
[smoothslider]

Template tag is to embed the slider by editing PHP file.
jonathanduane2010Author Commented:
@julianhansen

password is iRadio*2015
Julian HansenCommented:
Nope - just shakes its box at me.
jonathanduane2010Author Commented:
@julianhansen Sorry about that

try ireland as the password
Julian HansenCommented:
The reason your's are not smooth is that the images are all in the "smaller state". If you look at the reference site they have 7 items in the slider. Each column is 1/8th of the total width (12.5%) - except for the selected one which is 25%.
On hover they are setting the selected to 25% and the one that was selected reverts to 12.5%

In your setup you don't have any item selected - there is no provision for the expansion that happens when you hover over an item - so it is "jumping"
jonathanduane2010Author Commented:
Ok. So, how do I do it ?
Julian HansenCommented:
Add these styles
CSS
#main section {
  width: 12.5%
}
#main section.selected, #main section:hover {
  width: 25%;
}

Open in new window

And this jQuery
jQuery(function() {
  jQuery('#main').mouseenter(function() {
    jQuery('section:first-child').removeClass('selected');
  });
  jQuery('#main').mouseleave(function() {
    jQuery('section:first-child').addClass('selected');
  });
});

Open in new window

Finally, give the first <section> in the list the class of 'selected'

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Julian HansenCommented:
Note - because the last 3 items in the list are non-standard they will still cause the jumping - you need to standardise as per the first 4.
jonathanduane2010Author Commented:
ohk.

how do I standardise  the last 3 items?
jonathanduane2010Author Commented:
and where do I put the jquery code in my wordpress ?
Julian HansenCommented:
and where do I put the jquery code in my wordpress ?
Anywhere after where you jquery library is placed.
jonathanduane2010Author Commented:
how do I standardise  the last 3 items?
Julian HansenCommented:
1. You have to fix your broken images - they are pushing the content down - for now you can put an alt in (alt="") which will clear the broken image

2. You have to make your images fixed width so they don't expand to pus the content down
#main h3 img {
  max-height: 30px;
  width: auto;
}

Open in new window


The main thing though is your transitions - currently there is a slow transition on the item to display 25% width - this means as you move from one to the other quickly - one is transitioning up and the other down - which means they push each other out and you get a jumping effect. If you look at the sample site it is instant transitioning.
jonathanduane2010Author Commented:
I did exactly what you suggested, and it worked great.

But, some elements at the bottom of the side are floating to left.

Can you please help me resolving it.

Thanks.
Julian HansenCommented:
Not sure what I am looking for - the decade image strip seems to work fine now.
jonathanduane2010Author Commented:
Oh. Sorry about that.

The sections "Trending shows" , "IRADIO SHOWS" and "Currently on Air".

thanks.
Julian HansenCommented:
I think I was looking at the wrong link - other link has a password which seems different from one posted here.
jonathanduane2010Author Commented:
Oh.

Can you please look over  http://iradionortheast.com/

password: ireland

Thanks.
Julian HansenCommented:
I am seeing this - still not sure what I am looking forss33.jpg
jonathanduane2010Author Commented:
Both these sections should be in the center.
Julian HansenCommented:
This would constitute a new question as it does not relate to the original question asked.
jonathanduane2010Author Commented:
Hi,

a). I want to remove the extra height in my image slider.

b). I want to put different colours in the sections just like absoluteradio.png

Site: http://iradionortheast.com/
password: ireland

Please help me with this.

thanks.
absoluteradio.png
Julian HansenCommented:
a) Not sure where the extra height is
b) You can style your sections like this
.columnContainer section:nth-child(2n) {
  background: #eee;
}
.columnContainer section:nth-child(2n+1) {
  background: #aaa;
}

Open in new window

Change colours accordingly.
jonathanduane2010Author Commented:
Thanks a lot.

It works exactly what I wanted.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
WordPress

From novice to tech pro — start learning today.