Inne Dodanie Slideru na stronie głównej

wersja skryptu MyBB: 1.8.3
adres forum: www.DreamSkill.pl
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu): czy ktos moze mi podac dokladna instrukcje jak dodac ten slider na strone glowna: http://jquery.waw.pl/slidery/prosty-slider/

Ja robię to tak:
Nie zmieniając struktury wrzucam pliki z folderu js i images...
Dodaje kod CSS. Podany w przykładzie 05 bodajże (dostępne przy pobraniu ale chodzi o ten sam co jest na demo).
Dodaje odpowiedni div na stronie głównej przed panelem bocznym, wyswietla mi sie tylko pierwsza grafika i nic wiecej.

Pokaż jakie i gdzie kody wrzucasz.

w Global.css

#slider{}    
#slider ul, #slider li, #slider2 ul, #slider2 li{
    margin:0;
    padding:0;
    list-style:none;
    }
#slider li, #slider2 li{
    /*
        define width and height of list item (slide)
        entire slider area will adjust according to the parameters provided here
    */
    width:696px;
    height:241px;
    overflow:hidden;
    }    
    
p#controls, p#controls2{
    margin:0;
    position:relative;
    }

#prevBtn, #nextBtn, #prevBtn2, #nextBtn2{
    display:block;
    margin:0;
    overflow:hidden;
    text-indent:-8000px;        
    width:30px;
    height:77px;
    position:absolute;
    left:-30px;
    top:-160px;
    }    
#nextBtn, #nextBtn2{
    left:696px;
    }                                                        
#prevBtn a, #nextBtn a, #prevBtn2 a, #nextBtn2 a{  
    display:block;
    width:30px;
    height:77px;
    background:url(images/btn_prev.gif) no-repeat 0 0;    
    }    
#nextBtn a, #nextBtn2 a{
    background:url(images/btn_next.gif) no-repeat 0 0;    
    }

w szablonach > strona główna > index

<div id="slider" style="width: 696px; height: 241px; overflow: hidden;">
            <ul style="width: 3480px; margin-left: -2681.15581432154px;">                
                <li style="float: left;"><a href="http://templatica.com/preview/30"><img src="images/01.jpg" alt="Css Template Preview"></a></li>
                <li style="float: left;"><a href="http://templatica.com/preview/7"><img src="images/02.jpg" alt="Css Template Preview"></a></li>
                <li style="float: left;"><a href="http://templatica.com/preview/25"><img src="images/03.jpg" alt="Css Template Preview"></a></li>
                <li style="float: left;"><a href="http://templatica.com/preview/26"><img src="images/04.jpg" alt="Css Template Preview"></a></li>
                <li style="float: left;"><a href="http://templatica.com/preview/27"><img src="images/05.jpg" alt="Css Template Preview"></a></li>            
            </ul>
        </div>

A JS?
do headerinclude:

    <script type="text/javascript" src="ścieżka do pliku/easySlider1.5.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){    
            $("#slider").easySlider({
                auto: true,
                continuous: true
            });
        });    
    </script>

dodałem, nie wiem czy to nie jest cos z tymi divami albo css. bo zobacz jak to na glownej (dreamskill.pl) teraz wyglada, pod tabelką z serwerami.

Plik easySlider1.5.js wrzuć do katalogu js na FTP.

Jest wrzucony od samego początku

no to pokaż tutaj szablon headerinclude.

Oto i on:

<script type="text/javascript" src="/domains/dreamskill.pl/public_html/js/easySlider1.5.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){    
$("#slider").easySlider({
    controlsBefore:    '<p id="controls">',
    controlsAfter:    '</p>',
    auto: true,
    continuous: true
});
$("#slider2").easySlider({
    controlsBefore:    '<p id="controls2">',
    controlsAfter:    '</p>',    
    prevId: 'prevBtn2',
    nextId: 'nextBtn2'    
});            
});    
    </script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="alternate" type="application/rss+xml" title="{$lang->latest_threads} (RSS 2.0)" href="{$mybb->settings['bburl']}/syndication.php" />
<link rel="alternate" type="application/atom+xml" title="{$lang->latest_threads} (Atom 1.0)" href="{$mybb->settings['bburl']}/syndication.php?type=atom1.0" />
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,200italic,400italic,600italic' rel='stylesheet' type='text/css'>
<meta http-equiv="Content-Type" content="text/html; charset={$charset}" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/jquery.js?ver=1800"></script>
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/jquery.plugins.min.js?ver=1800"></script>
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/general.js?ver=1800"></script>
<script type="text/javascript" src="images/vienna/jquery-ui.js"></script>
<script type="text/javascript" src="images/vienna/jquery.tipsy.js"></script>
<script type="text/javascript" src="images/vienna/jquery.cookie.js"></script>


<script type='text/javascript'>
jQuery(function() {
jQuery("a").tipsy({gravity: jQuery.fn.tipsy.autoNS});
jQuery("title").tipsy({gravity: jQuery.fn.tipsy.autoNS});
jQuery("img").tipsy({gravity: jQuery.fn.tipsy.autoNS});
jQuery("i").tipsy({gravity: jQuery.fn.tipsy.autoNS});
jQuery("span").tipsy({gravity: jQuery.fn.tipsy.autoNS});
jQuery("div").tipsy({gravity: jQuery.fn.tipsy.autoNS});
  });
</script>

{$stylesheets}
<script type="text/javascript">
<!--
    lang.unknown_error = "{$lang->unknown_error}";

    lang.select2_match = "{$lang->select2_match}";
    lang.select2_matches = "{$lang->select2_matches}";
    lang.select2_nomatches = "{$lang->select2_nomatches}";
    lang.select2_inputtooshort_single = "{$lang->select2_inputtooshort_single}";
    lang.select2_inputtooshort_plural = "{$lang->select2_inputtooshort_plural}";
    lang.select2_inputtoolong_single = "{$lang->select2_inputtoolong_single}";
    lang.select2_inputtoolong_plural = "{$lang->select2_inputtoolong_plural}";
    lang.select2_selectiontoobig_single = "{$lang->select2_selectiontoobig_single}";
    lang.select2_selectiontoobig_plural = "{$lang->select2_selectiontoobig_plural}";
    lang.select2_loadmore = "{$lang->select2_loadmore}";
    lang.select2_searching = "{$lang->select2_searching}";

    var cookieDomain = "{$mybb->settings['cookiedomain']}";
    var cookiePath = "{$mybb->settings['cookiepath']}";
    var cookiePrefix = "{$mybb->settings['cookieprefix']}";
    var deleteevent_confirm = "{$lang->deleteevent_confirm}";
    var removeattach_confirm = "{$lang->removeattach_confirm}";
    var loading_text = '{$lang->ajax_loading}';
    var saving_changes = '{$lang->saving_changes}';
    var use_xmlhttprequest = "{$mybb->settings['use_xmlhttprequest']}";
    var my_post_key = "{$mybb->post_code}";
    var rootpath = "{$mybb->settings['bburl']}";
    var imagepath = "{$theme['imgdir']}";
      var yes_confirm = "{$lang->yes}";
    var no_confirm = "{$lang->no}";
    var MyBBEditor = null;
    var spinner_image = "{$theme['imgdir']}/spinner.gif";
    var spinner = "<img src='" + spinner_image +"' alt='' />";
// -->
</script>

<script type="text/javascript" src="/domains/dreamskill.pl/public_html/js/easySlider1.5.js"></script>

zamień na:

<script type="text/javascript" src="js/easySlider1.5.js"></script>

Bez zmian. A może pomożesz przy jakimś innym Sliderze, chodzi mi po prostu o prostotę.
Chcę slider na 5 okienek z przyciskami obok, na czy po bokach które po kliknięciu włączają odpowiedni obrazek, a tak to sam się zmienia co ileś sekund... coś jak jest na skillconnect.eu tylko ze nie chce identycznego ale cos na podobę ;D

Może taki:
http://www.jboss.org/help/projectpagegui...opedslider

Jak chcesz coś prostego, to wstaw po prostu marquee a wewnątrz 5 <img />

Minus taki, że nie będziesz miał strzałek do przełączenia.

Snake, a gdzie jest download css tego? Bo tam jest tylko do js i kod na główną...

To w miejsce wyświetlania:

<div id="loopedSlider">
   <div class="container">
     <div class="slides" style="width: 2000px; left: 0px;">
       <div style="position: absolute; left: 0px; display: block;"><a href="http://www.redhat.com"><img width="500" height="375" src="https://www.jboss.org/dms/testimages/images/image-01.jpg" alt="First Image"></a></div>
       <div style="position: absolute; left: 500px; display: block;"><a href="http://fedoraproject.org/"><img width="500" height="375" src="https://www.jboss.org/dms/testimages/images/image-02.jpg" alt="Second Image"></a></div>
       <div style="position: absolute; left: 1000px; display: block;"><a href="http://www.jboss.com"><img width="500" height="375" src="https://www.jboss.org/dms/testimages/images/image-03.jpg" alt="Third Image"></a></div>
       <div style="position: absolute; left: -500px; display: block;"><a href="http://www.jboss.org"><img width="500" height="375" src="https://www.jboss.org/dms/testimages/images/image-04.jpg" alt="Fourth Image"></a></div>
     </div>
   </div>
   <a href="#" class="previous"><img width="22" height="22" src="https://www.jboss.org/dms/testimages/images/previous.png" alt="Previous"></a>
   <a href="#" class="next"><img width="22" height="22" src="https://www.jboss.org/dms/testimages/images/next.png" alt="Next"></a>
   <ul class="pagination">
     <li class="  active"><a href="#" rel="1">1</a></li>
     <li class=" "><a href="#" rel="2">2</a></li>
     <li class=" "><a href="#" rel="3">3</a></li>
     <li class=" "><a href="#" rel="4">4</a></li>
   </ul>
</div>

To np. do headerinclude:

<script type="text/javascript" charset="utf-8">
     $(function(){
         $('#loopedSlider').loopedSlider({
             autoStart: 3500,
             restart: 15000
         });
         $('#newsSlider').loopedSlider({
             autoHeight: 400
         });
     });
</script>

A to do nowego pliku i odnośniek w headerinclude: http://jsfiddle.net/5mkk4d78/