Hello.

I'm newbie on webdesgin (:

Anyone help me about slider for my web page home?

I dont find any code. Can I use JavaScript or else?

Thanks for all (:

[KK]

Hi,

@Tim has described the process of creating a slider here -
viewtopic.php?p=14486#p14486

Hope it helps.

Thanks for repyly KK.

I treid this yesterday but images dont slide.

Can u share whit me final codes?

thanks.

[KK]

Hi,

As mentioned in the thread, we actually start with your existing (and working) HTML/CSS/JS code and then retrofit Couch into it.

If you could post the (working) slider code you have here, we can tell you how to fit Couch tags into it (although, to be fair, it won't differ much from the process already described in the thread I mentioned before).

So can you suggest me a JavaScript healthy employees?

thanks,

I like jQuery Tools (http://jquerytools.org/). Provides a javascript library for lots of UI elements including sliders. It's not automatic. You have to learn to use it and set it up, but it's pretty easy, with easy to follow examples and tutorials.

[cheesypoof]

Adding to what Tim said:
http://foundation.zurb.com/docs/components/orbit.html
http://getbootstrap.com/javascript/#carousel

Hello.

Thanks for reply.

I treid orbit and others but I dont setup it. Anyone can share finaly codes ?

Hi,

Using Orbit should work quite simple, anyhow I used FlexSlider one time and this option is maybe easier:
https://github.com/woothemes/FlexSlider.

Your code should look something like below (for flexslider).
Load Flexslider.

Code: Select all

   <link rel="stylesheet" href="<cms:show k_site_link/>js/FlexSlider/flexslider.css" type="text/css" />
   <script src="<cms:show k_site_link/>js/FlexSlider/jquery.flexslider-min.js"></script>

The slider is then a simple page loop using <li></li>

Code: Select all

<ul class="slides">
<cms:pages masterpage='your sliderpages.php' >

 <li>
    
The variable, e.g. images, you like to show from your sliderpages.php are available here...
    
  </li>

</cms:pages>
</ul> 

You can adjust the slider behavior (see the docomentation of FlexSlider) to something like:

Code: Select all

<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider({
          animation: "fade",
          animationLoop: true,
          controlNav: false,
          directionNav: false,
          animationSpeed: 2600,
          slideshowSpeed: 7000,
          startAt: 0
    });
  });
</script>