Bestimmter Slider gesucht

selle

Hi,

wie der Titel schon sagt bin ich auf der Suche nach einem bestimmten Slider. Kennt jemand das Ding oder was ähnliches?

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

befla

und wie bestimmt soll der Slider sein? Definition fehlt. In den Plugins wirst du evtl. auch fündig

Weber-NRW

Nur falls noch von Interesse?!

Wenn man mal unter die Haube der Webseite guckt kann man sehen, dass es sich nicht um einen herkömmlichen "Solider" handelt, sondern um Tabs.

Dazu wird das jquery_tabs.js Script genutzt:

Code

/**
 * Tabs - jQuery plugin for accessible, unobtrusive tabs
 * @requires jQuery v1.1.1
 *
 * http://stilbuero.de/tabs/
 *
 * Copyright (c) 2006 Klaus Hartl (stilbuero.de)
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 * Version: 2.7.4
 */

Alles anzeigen

Das ganze wird mit folgender Zeile Javascript aktiviert:

Code

$('#tabs_news').tabs({ fxFade: true, fxSpeed: 'fast' });

Das genutzte HTML Gerüst sieht wie folgt aus:

Code

<div class="slider">
	<div id="tabs_news">
		<div id="news-5" class="tabs-container" style="">
			<div><a href="#"><img src="img_1.jpg" alt="icon" width="940" height="400" border="0"></a></div>
		</div>
		<div id="news-4" class="tabs-container tabs-hide">
			<div><a href="#"><img src="img_2.jpg" alt="icon" width="940" height="400" border="0"></a></div>
		</div>
		<div id="news-3" class="tabs-container tabs-hide" style="">
			<div><a href="#"><img src="img_3.jpg" alt="icon" width="940" height="400" border="0"></a></div>
		</div>
		<div id="news-2" class="tabs-container tabs-hide" style="">
			<div><a href="#"><img src="img_4.jpg" alt="icon" width="940" height="400" border="0"></a></div>
		</div>
		<div id="news-1" class="tabs-container tabs-hide" style="">
			<div><a href="#"><img src="img_5.jpg" alt="icon" width="940" height="400" border="0"></a></div>
		</div>
		<ul class="tabs tabs-nav">
			<li class="tabs-selected"><a href="#news-5"><img src="spacer.gif" alt="picture" width="21" height="22" border="0"></a></li>
			<li class=""><a href="#news-4"><img src="spacer.gif" alt="picture" width="21" height="22" border="0"></a></li>
			<li class=""><a href="#news-3"><img src="spacer.gif" alt="picture" width="21" height="22" border="0"></a></li>
			<li class=""><a href="#news-2"><img src="spacer.gif" alt="picture" width="21" height="22" border="0"></a></li>
			<li class=""><a href="#news-1"><img src="spacer.gif" alt="picture" width="21" height="22" border="0"></a></li>
		</ul>
	</div>
</div>

Alles anzeigen

und das CSS:

Code

/* Slieder Tabs */
#tabs_news { margin:0 auto; padding:0; width:940px; }
.slider { width:940px; padding:10px 0 0 0; margin:0 auto; }
.slider ul.tabs { margin:0 auto; padding:10px 10px 35px 10px; width:160px; list-style:none; }
.slider ul.tabs li { margin:0 5px; padding:0; float:right; background:none; }
.slider ul.tabs li img { float:right; margin:0; padding:0; }
.slider ul.tabs li a { display:block; background:url(images/tabs_2.gif) top no-repeat; padding:12px 0; margin:0; }
.slider ul.tabs li a:hover { background:url(images/tabs_1.gif) top no-repeat; }
.slider ul.tabs li.tabs-selected a { background:url(images/tabs_1.gif) top no-repeat;}
.tabs-hide { display:none; }

Alle Code Zeilen sind der von Selle verlinkten Seite entnommen und stammen nicht aus meiner Feder. Einzig die URLs sind von mir gekürzt worden, da die zum Verständnis nicht notwendig sind.

Ich hoffe ich konnte weiterhelfen.

easywetten.com

Kann mir jemadn von euch sagen wo ich in meinem Slider die GEschwindigkeit einstellen kann?

HTML

/* Slider */
.gallery { width:633px; height:345px; margin:0 auto; padding:10px 0;}
#slider { width:633px; height:345px; margin:0 auto; padding:0; list-style:none; }
#slider ul, #slider li { margin:0; padding:0; list-style:none; }
/* 
    define width and height of list item (slide)
    entire slider area will adjust according to the parameters provided here
*/
#slider li { overflow:hidden; margin:0 auto; }
p#controls { margin:0 auto; position:relative; }
#prevBtn { display:block; margin:0; overflow:hidden; width:38px; height:38px; position:absolute; left:10px; top:-55px; }
#nextBtn { display:block; margin:0; overflow:hidden; width:38px; height:38px; position:absolute; left:55px; top:-55px; }
#prevBtn a { display:block; width:38px; height:38px; background:url(images/l_arrow.png) no-repeat 0 0; }
#nextBtn a { display:block; width:38px; height:38px; background:url(images/r_arrow.png) no-repeat 0 0; }

Alles anzeigen

Weber-NRW

easywetten.com:

Um welchen der tausend möglichen slider handelt es sich denn?

Zumindest lässt es sich nicht im CSS einstellen ;-)

easywetten.com

Danke erst einmal für das schnelle Feedback. Wo kann ich denn sehen welcher Slider das ist? Also in welcher Datei sollte der Hinweis versteckt sein? Ich nutze ein gekauftes Template...

easywetten.com

Haben dieses Template erworben:

http://www.templatesold.com/templates/word…theme/5744.html

Wo der Slyder wie folgt umschrieben wird:

3 Integrated jQuery/AJAX Sliders with Easy Setup Options:

- [COLOR=#0000ff]Cycle Slider[/COLOR]

- [COLOR=#0000ff]Coin Slider[/COLOR]

- [COLOR=#0000ff]Piecemaker 3D Slider[/COLOR]

Weber-NRW

Entweder die Temple Entwickler haben an so etwas gedacht, und in den Einstellungen fürs Template dafür was vorgesehen.

Dann ist mein Part hier erledigt ;)

Oder Du schickst mir eine private Nachricht mit der URL zu Deiner Seite und ich gucke mal, welchen solider Du nutzt und wie Du das am besten löst.

Aber bedenke: alles ohne Gewähr :-)

gericoach

tippe mal auf die functions.php...aber wenn es 3 integrierte Slider gibt, muss ja wohl irgendwo die Möglichkeit bestehen, zwischen diesen zu entscheiden. Und da schliesse ich mich Weber-NRW an:

Zitat

Entweder die Temple Entwickler haben an so etwas gedacht, und in den Einstellungen fürs Template dafür was vorgesehen.

easywetten.com

also ich habe noch den Hinwesi auf die Slider gefunden:

HTML

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/easySlider1.5.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/hoverintent.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/superfish.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/script.js"></script>

easywetten.com

eigentlich würde mir allein schon reichen, wenn ich das Jacascript finden würde... :(

Weber-NRW

Zitat von easywetten.com

eigentlich würde mir allein schon reichen, wenn ich das Jacascript finden würde... :(

Nimm das hier:
wp-content/themes/presswind/js/script.js

Dort findest Du folgendes:

Code

$("#slider").easySlider({
		controlsBefore:	'<p id="controls">',
		controlsAfter:	'</p>',
		auto: true, 
		continuous: true
	});

Dort musst du die nur die Option

Code

speed: xxx,

hinzufügen.

Also:

Code

$("#slider").easySlider({
		controlsBefore:	'<p id="controls">',
		controlsAfter:	'</p>',
		auto: true, 
		continuous: true,
		speed: xxx
	});

Viel Erfolg.

easywetten.com

Super! Vielen Dank! Ich suche die ganze Zeit über den Editor. Das ich aber direkt mal im auf dem Server schauen muss, hatte ich nicht auf dem Schirm :roll:

Vielen Dank an euch!!!

Aktuell läuft der Slider ja von links nach rechts und dann wieder über alle Pics zurück. Ich würde dies gerne so anpassen, das wir einen Kreislauf haben.. Immer nur von links nach rechts. Wisst ihr zufällig wo ich das auch noch anpassen kann? :-D

Danke euch !!!!! Echt SUPER von euch!

Weber-NRW

Dafür hat der easyslider keine Option, zumindest habe ich keine gefunden.

Wenn Du das haben willst, musst Du einen anderen Slider nehmen.

easywetten.com

Ok. Danke dir!

Schade. Ist es denn viel "Arbeit" den slider auszutauschen oder muss ich "nur" im Javascript was anpassen?

easywetten.com

Habe hier folgende Optionen gefunden:

prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next',
controlsShow: true,
controlsBefore: '',
controlsAfter: '',
controlsFade: true,
firstId: 'firstBtn',
firstText: 'First',
firstShow: false,
lastId: 'lastBtn',
lastText: 'Last',
lastShow: false,
vertical: false,
speed: 800,
auto: false,
pause: 2000,
continuous: false

Davon ist keine hilfreich?

easywetten.com

Ok. Speed habe ich dank euerer Hilfe erfolgreich angepasst. Jetzt muss nur noch nach dem letzten Pic das erste kommen.. Hier habe ich nun auch den Quellcode des Sliders:

HTML

/*
 *     Easy Slider 1.5 - jQuery plugin
 *    written by Alen Grakalic    
 *    http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
 *
 *    Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
 *    Dual licensed under the MIT (MIT-LICENSE.txt)
 *    and GPL (GPL-LICENSE.txt) licenses.
 *
 *    Built for jQuery library
 *    http://jquery.com
 *
 */
 
/*
 *    markup example for $("#slider").easySlider();
 *    
 *     <div id="slider">
 *        <ul>
 *            <li><img src="images/01.jpg" alt="" /></li>
 *            <li><img src="images/02.jpg" alt="" /></li>
 *            <li><img src="images/03.jpg" alt="" /></li>
 *            <li><img src="images/04.jpg" alt="" /></li>
 *            <li><img src="images/05.jpg" alt="" /></li>
 *        </ul>
 *    </div>
 *
 */


(function($) {


    $.fn.easySlider = function(options){
      
        // default configuration properties
        var defaults = {            
            prevId:         'prevBtn',
            prevText:         '',
            nextId:         'nextBtn',    
            nextText:         '',
            controlsShow:    true,
            controlsBefore:    '',
            controlsAfter:    '',    
            controlsFade:    true,
            firstId:         'firstBtn',
            firstText:         'First',
            firstShow:        false,
            lastId:         'lastBtn',    
            lastText:         'Last',
            lastShow:        false,                
            vertical:        false,
            speed:             100,
            auto:            false,
            pause:            8000,
            continuous:        false
        }; 
        
        var options = $.extend(defaults, options);  
                
        this.each(function() {  
            var obj = $(this);                 
            var s = $("li", obj).length;
            var w = $("li", obj).width(); 
            var h = $("li", obj).height(); 
            obj.width(w); 
            obj.height(h); 
            obj.css("overflow","hidden");
            var ts = s-1;
            var t = 0;
            $("ul", obj).css('width',s*w);            
            if(!options.vertical) $("li", obj).css('float','left');
            
            if(options.controlsShow){
                var html = options.controlsBefore;
                if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';
                html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';
                html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>';
                if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';
                html += options.controlsAfter;                        
                $(obj).after(html);                                        
            };
    
            $("a","#"+options.nextId).click(function(){        
                animate("next",true);
            });
            $("a","#"+options.prevId).click(function(){        
                animate("prev",true);                
            });    
            $("a","#"+options.firstId).click(function(){        
                animate("first",true);
            });                
            $("a","#"+options.lastId).click(function(){        
                animate("last",true);                
            });        
            
            function animate(dir,clicked){
                var ot = t;                
                switch(dir){
                    case "next":
                        t = (ot>=ts) ? (options.continuous ? 0 : ts) : t+1;                        
                        break; 
                    case "prev":
                        t = (t<=0) ? (options.continuous ? ts : 0) : t-1;
                        break; 
                    case "first":
                        t = 0;
                        break; 
                    case "last":
                        t = ts;
                        break; 
                    default:
                        break; 
                };    
                
                var diff = Math.abs(ot-t);
                var speed = diff*options.speed;                        
                if(!options.vertical) {
                    p = (t*w*-1);
                    $("ul",obj).animate(
                        { marginLeft: p }, 
                        speed
                    );                
                } else {
                    p = (t*h*-1);
                    $("ul",obj).animate(
                        { marginTop: p }, 
                        speed
                    );                    
                };
                
                if(!options.continuous && options.controlsFade){                    
                    if(t==ts){
                        $("a","#"+options.nextId).hide();
                        $("a","#"+options.lastId).hide();
                    } else {
                        $("a","#"+options.nextId).show();
                        $("a","#"+options.lastId).show();                    
                    };
                    if(t==0){
                        $("a","#"+options.prevId).hide();
                        $("a","#"+options.firstId).hide();
                    } else {
                        $("a","#"+options.prevId).show();
                        $("a","#"+options.firstId).show();
                    };                    
                };                
                
                if(clicked) clearTimeout(timeout);
                if(options.auto && dir=="next" && !clicked){;
                    timeout = setTimeout(function(){
                        animate("next",false);
                    },diff*options.speed+options.pause);
                };
                
            };
            // init
            var timeout;
            if(options.auto){;
                timeout = setTimeout(function(){
                    animate("next",false);
                },options.pause);
            };        
        
            if(!options.continuous && options.controlsFade){                    
                $("a","#"+options.prevId).hide();
                $("a","#"+options.firstId).hide();                
            };                
            
        });
      
    };


})(jQuery);

Alles anzeigen

easywetten.com

Also das es geht, sieht man hier...

http://cssglobe.com/lab/easyslider1.7/02.html

... die Frage ist nur wie? :roll:

Weber-NRW

Du hast Dir die Antwort eigentlich schon selber geben.

In Deinem Template ist die Version 1.5 von easyslider. Auf der von Die verlinken Seite ist Version 1.7 und dort steht an Neuerungen:

Zitat

continuous scroll instead of jumping to the first (or last) slide

Du musst also "nur" easyslider in Deinem Template gegen die aktuelle Austauschen und die Option

Code

continuous: true

hinzufügen.

HTML

continuous


If set to true clicking the next button when the slider reached the end will simply continue showing all of the slides again with continuous motion. Combining this option with auto (both set to true) you'll get endless animation.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Bestimmter Slider gesucht

Jetzt mitmachen!