• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Ausrichtung einer Slide Show

xMaveeeX

New member
Hallo liebe Leute,

mit dem folgenden Slide Show jQuery habe ich leider Schwierigkeiten, mein Ziel ist es dieses komplett mittig auf meiner Seite darzustellen.
Ich denke ja es liegt irgendwo mit am "absolute" - aber wie kann man dies verändern damit es dann mittig dargestellt wird?

Falls es benötigt werden sollte, meine Seite hat eine Breite von 1200 px.

Schon mal ein Danke für alle die meinen Beitrag gelesen und ein noch größeres Danke an alle die mir möglicherweise helfen können. :)

Ps: Habe gelesen das größerer Code angehängt werden soll, daher mache ich das mal.

Anhang anzeigen Slider.txt
Anhang anzeigen slider_CSS.txt
 
Zuletzt bearbeitet:
Einen Link zu der Quelle wo du den FlexSlider her hast hätte auch genügt, anstatt den Code vom FlexSlider-Plugin als Textdatei hochzuladen.
Zudem hilft das so gut wie überhaupt nicht bei deiner Fragestellung. Um helfen zu könne benötigen wir entweder einen Testlink zu deine Seite, wo man sich das Problem anschauen kann, oder den HTML/CSS-Code, damit man sehen kann, wie dein Konstrukt ausschaut.
 
Einen Link zu der Quelle wo du den FlexSlider her hast hätte auch genügt, anstatt den Code vom FlexSlider-Plugin als Textdatei hochzuladen.
Die Datei, ist die Quelle. Diese war vorher hardcodiert in einem Template. Eine Anleitung oder sonstiges habe ich leider nicht.


Nach 10 Minuten suchen, habe ich nun eine gleichnamige CSS-Datei gefunden.
Diese habe ich dann auch im ersten Beitrag verlinkt damit das übersichtlich bleibt.
Hier ist mal eine Beispielseite: Home


Ps: So sah das nette Ding vorher aus:

Code:
(function(a){a.flexslider=function(c,b){var d=a(c);a.data(c,"flexslider",d);d.init=function(){d.vars=a.extend({},a.flexslider.defaults,b);a.data(c,"flexsliderInit",true);d.container=a(".slides",d).first();d.slides=a(".slides:first > li",d);d.count=d.slides.length;d.animating=false;d.currentSlide=d.vars.slideToStart;d.animatingTo=d.currentSlide;d.atEnd=(d.currentSlide==0)?true:false;d.eventType=("ontouchstart" in document.documentElement)?"touchstart":"click";d.cloneCount=0;d.cloneOffset=0;d.manualPause=false;d.vertical=(d.vars.slideDirection=="vertical");d.prop=(d.vertical)?"top":"marginLeft";d.args={};d.transitions="webkitTransition" in document.body.style&&d.vars.useCSS;if(d.transitions){d.prop="-webkit-transform"}if(d.vars.controlsContainer!=""){d.controlsContainer=a(d.vars.controlsContainer).eq(a(".slides").index(d.container));d.containerExists=d.controlsContainer.length>0}if(d.vars.manualControls!=""){d.manualControls=a(d.vars.manualControls,((d.containerExists)?d.controlsContainer:d));d.manualExists=d.manualControls.length>0}if(d.vars.randomize){d.slides.sort(function(){return(Math.round(Math.random())-0.5)});d.container.empty().append(d.slides)}if(d.vars.animation.toLowerCase()=="slide"){if(d.transitions){d.setTransition(0)}d.css({overflow:"hidden"});if(d.vars.animationLoop){d.cloneCount=2;d.cloneOffset=1;d.container.append(d.slides.filter(":first").clone().addClass("clone")).prepend(d.slides.filter(":last").clone().addClass("clone"))}d.newSlides=a(".slides:first > li",d);var m=(-1*(d.currentSlide+d.cloneOffset));if(d.vertical){d.newSlides.css({display:"block",width:"100%","float":"left"});d.container.height((d.count+d.cloneCount)*200+"%").css("position","absolute").width("100%");setTimeout(function(){d.css({position:"relative"}).height(d.slides.filter(":first").height());d.args[d.prop]=(d.transitions)?"translate3d(0,"+m*d.height()+"px,0)":m*d.height()+"px";d.container.css(d.args)},100)}else{d.args[d.prop]=(d.transitions)?"translate3d("+m*d.width()+"px,0,0)":m*d.width()+"px";d.container.width((d.count+d.cloneCount)*200+"%").css(d.args);setTimeout(function(){d.newSlides.width(d.width()).css({"float":"left",display:"block"})},100)}}else{d.transitions=false;d.slides.css({width:"100%","float":"left",marginRight:"-100%"}).eq(d.currentSlide).fadeIn(d.vars.animationDuration)}if(d.vars.controlNav){if(d.manualExists){d.controlNav=d.manualControls}else{var e=a('<ol class="flex-control-nav"></ol>');var s=1;for(var t=0;t<d.count;t++){e.append("<li><a>"+s+"</a></li>");s++}if(d.containerExists){a(d.controlsContainer).append(e);d.controlNav=a(".flex-control-nav li a",d.controlsContainer)}else{d.append(e);d.controlNav=a(".flex-control-nav li a",d)}}d.controlNav.eq(d.currentSlide).addClass("active");d.controlNav.bind(d.eventType,function(i){i.preventDefault();if(!a(this).hasClass("active")){(d.controlNav.index(a(this))>d.currentSlide)?d.direction="next":d.direction="prev";d.flexAnimate(d.controlNav.index(a(this)),d.vars.pauseOnAction)}})}if(d.vars.directionNav){var v=a('<ul class="flex-direction-nav"><li><a class="prev" href="#">'+d.vars.prevText+'</a></li><li><a class="next" href="#">'+d.vars.nextText+"</a></li></ul>");if(d.containerExists){a(d.controlsContainer).append(v);d.directionNav=a(".flex-direction-nav li a",d.controlsContainer)}else{d.append(v);d.directionNav=a(".flex-direction-nav li a",d)}if(!d.vars.animationLoop){if(d.currentSlide==0){d.directionNav.filter(".prev").addClass("disabled")}else{if(d.currentSlide==d.count-1){d.directionNav.filter(".next").addClass("disabled")}}}d.directionNav.bind(d.eventType,function(i){i.preventDefault();var j=(a(this).hasClass("next"))?d.getTarget("next"):d.getTarget("prev");if(d.canAdvance(j)){d.flexAnimate(j,d.vars.pauseOnAction)}})}if(d.vars.keyboardNav&&a("ul.slides").length==1){function h(i){if(d.animating){return}else{if(i.keyCode!=39&&i.keyCode!=37){return}else{if(i.keyCode==39){var j=d.getTarget("next")}else{if(i.keyCode==37){var j=d.getTarget("prev")}}if(d.canAdvance(j)){d.flexAnimate(j,d.vars.pauseOnAction)}}}}a(document).bind("keyup",h)}if(d.vars.mousewheel){d.mousewheelEvent=(/Firefox/i.test(navigator.userAgent))?"DOMMouseScroll":"mousewheel";d.bind(d.mousewheelEvent,function(y){y.preventDefault();y=y?y:window.event;var i=y.detail?y.detail*-1:y.originalEvent.wheelDelta/40,j=(i<0)?d.getTarget("next"):d.getTarget("prev");if(d.canAdvance(j)){d.flexAnimate(j,d.vars.pauseOnAction)}})}if(d.vars.slideshow){if(d.vars.pauseOnHover&&d.vars.slideshow){d.hover(function(){d.pause()},function(){if(!d.manualPause){d.resume()}})}d.animatedSlides=setInterval(d.animateSlides,d.vars.slideshowSpeed)}if(d.vars.pausePlay){var q=a('<div class="flex-pauseplay"><span></span></div>');if(d.containerExists){d.controlsContainer.append(q);d.pausePlay=a(".flex-pauseplay span",d.controlsContainer)}else{d.append(q);d.pausePlay=a(".flex-pauseplay span",d)}var n=(d.vars.slideshow)?"pause":"play";d.pausePlay.addClass(n).text((n=="pause")?d.vars.pauseText:d.vars.playText);d.pausePlay.bind(d.eventType,function(i){i.preventDefault();if(a(this).hasClass("pause")){d.pause();d.manualPause=true}else{d.resume();d.manualPause=false}})}if("ontouchstart" in document.documentElement&&d.vars.touch){var w,u,l,r,o,x,p=false;d.each(function(){if("ontouchstart" in document.documentElement){this.addEventListener("touchstart",g,false)}});function g(i){if(d.animating){i.preventDefault()}else{if(i.touches.length==1){d.pause();r=(d.vertical)?d.height():d.width();x=Number(new Date());l=(d.vertical)?(d.currentSlide+d.cloneOffset)*d.height():(d.currentSlide+d.cloneOffset)*d.width();w=(d.vertical)?i.touches[0].pageY:i.touches[0].pageX;u=(d.vertical)?i.touches[0].pageX:i.touches[0].pageY;d.setTransition(0);this.addEventListener("touchmove",k,false);this.addEventListener("touchend",f,false)}}}function k(i){o=(d.vertical)?w-i.touches[0].pageY:w-i.touches[0].pageX;p=(d.vertical)?(Math.abs(o)<Math.abs(i.touches[0].pageX-u)):(Math.abs(o)<Math.abs(i.touches[0].pageY-u));if(!p){i.preventDefault();if(d.vars.animation=="slide"&&d.transitions){if(!d.vars.animationLoop){o=o/((d.currentSlide==0&&o<0||d.currentSlide==d.count-1&&o>0)?(Math.abs(o)/r+2):1)}d.args[d.prop]=(d.vertical)?"translate3d(0,"+(-l-o)+"px,0)":"translate3d("+(-l-o)+"px,0,0)";d.container.css(d.args)}}}function f(j){d.animating=false;if(d.animatingTo==d.currentSlide&&!p&&!(o==null)){var i=(o>0)?d.getTarget("next"):d.getTarget("prev");if(d.canAdvance(i)&&Number(new Date())-x<550&&Math.abs(o)>20||Math.abs(o)>r/2){d.flexAnimate(i,d.vars.pauseOnAction)}else{if(d.vars.animation!=="fade"){d.flexAnimate(d.currentSlide,d.vars.pauseOnAction)}}}this.removeEventListener("touchmove",k,false);this.removeEventListener("touchend",f,false);w=null;u=null;o=null;l=null}}if(d.vars.animation.toLowerCase()=="slide"){a(window).resize(function(){if(!d.animating&&d.is(":visible")){if(d.vertical){d.height(d.slides.filter(":first").height());d.args[d.prop]=(-1*(d.currentSlide+d.cloneOffset))*d.slides.filter(":first").height()+"px";if(d.transitions){d.setTransition(0);d.args[d.prop]=(d.vertical)?"translate3d(0,"+d.args[d.prop]+",0)":"translate3d("+d.args[d.prop]+",0,0)"}d.container.css(d.args)}else{d.newSlides.width(d.width());d.args[d.prop]=(-1*(d.currentSlide+d.cloneOffset))*d.width()+"px";if(d.transitions){d.setTransition(0);d.args[d.prop]=(d.vertical)?"translate3d(0,"+d.args[d.prop]+",0)":"translate3d("+d.args[d.prop]+",0,0)"}d.container.css(d.args)}}})}d.vars.start(d)};d.flexAnimate=function(g,f){if(!d.animating&&d.is(":visible")){d.animating=true;d.animatingTo=g;d.vars.before(d);if(f){d.pause()}if(d.vars.controlNav){d.controlNav.removeClass("active").eq(g).addClass("active")}d.atEnd=(g==0||g==d.count-1)?true:false;if(!d.vars.animationLoop&&d.vars.directionNav){if(g==0){d.directionNav.removeClass("disabled").filter(".prev").addClass("disabled")}else{if(g==d.count-1){d.directionNav.removeClass("disabled").filter(".next").addClass("disabled")}else{d.directionNav.removeClass("disabled")}}}if(!d.vars.animationLoop&&g==d.count-1){d.pause();d.vars.end(d)}if(d.vars.animation.toLowerCase()=="slide"){var e=(d.vertical)?d.slides.filter(":first").height():d.slides.filter(":first").width();if(d.currentSlide==0&&g==d.count-1&&d.vars.animationLoop&&d.direction!="next"){d.slideString="0px"}else{if(d.currentSlide==d.count-1&&g==0&&d.vars.animationLoop&&d.direction!="prev"){d.slideString=(-1*(d.count+1))*e+"px"}else{d.slideString=(-1*(g+d.cloneOffset))*e+"px"}}d.args[d.prop]=d.slideString;if(d.transitions){d.setTransition(d.vars.animationDuration);d.args[d.prop]=(d.vertical)?"translate3d(0,"+d.slideString+",0)":"translate3d("+d.slideString+",0,0)";d.container.css(d.args).one("webkitTransitionEnd transitionend",function(){d.wrapup(e)})}else{d.container.animate(d.args,d.vars.animationDuration,function(){d.wrapup(e)})}}else{d.slides.eq(d.currentSlide).fadeOut(d.vars.animationDuration);d.slides.eq(g).fadeIn(d.vars.animationDuration,function(){d.wrapup()})}}};d.wrapup=function(e){if(d.vars.animation=="slide"){if(d.currentSlide==0&&d.animatingTo==d.count-1&&d.vars.animationLoop){d.args[d.prop]=(-1*d.count)*e+"px";if(d.transitions){d.setTransition(0);d.args[d.prop]=(d.vertical)?"translate3d(0,"+d.args[d.prop]+",0)":"translate3d("+d.args[d.prop]+",0,0)"}d.container.css(d.args)}else{if(d.currentSlide==d.count-1&&d.animatingTo==0&&d.vars.animationLoop){d.args[d.prop]=-1*e+"px";if(d.transitions){d.setTransition(0);d.args[d.prop]=(d.vertical)?"translate3d(0,"+d.args[d.prop]+",0)":"translate3d("+d.args[d.prop]+",0,0)"}d.container.css(d.args)}}}d.animating=false;d.currentSlide=d.animatingTo;d.vars.after(d)};d.animateSlides=function(){if(!d.animating){d.flexAnimate(d.getTarget("next"))}};d.pause=function(){clearInterval(d.animatedSlides);if(d.vars.pausePlay){d.pausePlay.removeClass("pause").addClass("play").text(d.vars.playText)}};d.resume=function(){d.animatedSlides=setInterval(d.animateSlides,d.vars.slideshowSpeed);if(d.vars.pausePlay){d.pausePlay.removeClass("play").addClass("pause").text(d.vars.pauseText)}};d.canAdvance=function(e){if(!d.vars.animationLoop&&d.atEnd){if(d.currentSlide==0&&e==d.count-1&&d.direction!="next"){return false}else{if(d.currentSlide==d.count-1&&e==0&&d.direction=="next"){return false}else{return true}}}else{return true}};d.getTarget=function(e){d.direction=e;if(e=="next"){return(d.currentSlide==d.count-1)?0:d.currentSlide+1}else{return(d.currentSlide==0)?d.count-1:d.currentSlide-1}};d.setTransition=function(e){d.container.css({"-webkit-transition-duration":(e/1000)+"s"})};d.init()};a.flexslider.defaults={animation:"fade",slideDirection:"horizontal",slideshow:true,slideshowSpeed:7000,animationDuration:600,directionNav:true,controlNav:true,keyboardNav:true,mousewheel:false,prevText:"Previous",nextText:"Next",pausePlay:false,pauseText:"Pause",playText:"Play",randomize:false,slideToStart:0,animationLoop:true,pauseOnAction:true,pauseOnHover:false,useCSS:true,touch:true,controlsContainer:"",manualControls:"",start:function(){},before:function(){},after:function(){},end:function(){}};a.fn.flexslider=function(b){return this.each(function(){if(a(this).find(".slides > li").length==1){a(this).find(".slides > li").fadeIn(400)}else{if(a(this).data("flexsliderInit")!=true){new a.flexslider(this,b)}}})}})(jQuery);

:grin:
 
Zuletzt bearbeitet von einem Moderator:
Einen Link zu der Quelle wo du den FlexSlider her hast hätte auch genügt, anstatt den Code vom FlexSlider-Plugin als Textdatei hochzuladen.
Die Datei ist die einzige Quelle die existiert, sie war in einem Template hardcodiert sowie unformatiert.

Ich habe mal die CSS Datei im ersten Beitrag verlinkt, irgendwie ist meine eigentliche Antwort hier wohl nicht angekommen....
-----

Und in dieser CSS ist auch nichts anwendbares, oder sehe ich das etwa falsch?
 
Zuletzt bearbeitet:
...irgendwie ist meine eigentliche Antwort hier wohl nicht angekommen....
Welche Antwort?


Ich habe mal die CSS Datei im ersten Beitrag verlinkt,...
Schön, aber das hilft genauso wenig bei deiner Fragestellung, wie die erste hochgeladene Datei.


Und in dieser CSS ist auch nichts anwendbares, oder sehe ich das etwa falsch?
Was dein Problem angeht...korrekt, denn
Zudem hilft das so gut wie überhaupt nicht bei deiner Fragestellung. Um helfen zu könne benötigen wir entweder einen Testlink zu deine Seite, wo man sich das Problem anschauen kann, oder den HTML/CSS-Code, damit man sehen kann, wie dein Konstrukt ausschaut.
Und beides hast du nicht geliefert!

Nehmen wir an folgendes HTML:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
	<title>FlexSlider 2</title>
	<meta content="charset=utf-8">
	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

	<!-- Demo CSS -->
	<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" />

	<!-- Modernizr -->
	<script src="js/modernizr.js"></script>
	<!-- jQuery -->
	<script src="js/jquery-1.11.1.min.js"></script>

	<!-- FlexSlider -->
	<script defer src="js/flexslider.js"></script>
	<script type="text/javascript">
		$(window).load(function() {
			$('.flexslider').flexslider({
				animation: "slide",
				start: function(slider) {
					$('body').removeClass('loading');
				}
			});
		});
	</script>
</head>

<body class="loading">
	<div id="container" class="cf">
		<div class="flexslider">
			<ul class="slides">
				<li>
					<img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
				</li>
				<li>
					<img src="images/kitchen_adventurer_lemon.jpg" />
				</li>
				<li>
					<img src="images/kitchen_adventurer_donut.jpg" />
				</li>
				<li>
					<img src="images/kitchen_adventurer_caramel.jpg" />
				</li>
			</ul>
		</div>
	</div>
</body>
</html>
und dann folgendes CSS, eingebunden nach deiner verlinkten CSS:
HTML:
#container {
	width: 1200px;
	margin: 0 auto;
	border: 4px solid blue;
}

.flexslider {
	width: 800px;
	margin: 0 auto;
}
Dann ist der Slider horizontal mittig...

Aber da, wie bereits gesagt, deine Struktur unbekannt ist, kann dir niemand genau beantworten wo dein Problem begraben liegt.
 

Die Antwort vom 13-09-2014, 01:17, welche heute erst irgendwann kam.

Um helfen zu könne benötigen wir entweder einen Testlink zu deine Seite, wo man sich das Problem anschauen kann, oder den HTML/CSS-Code, damit man sehen kann, wie dein Konstrukt ausschaut.
Und beides hast du nicht geliefert!

Testlink ist vorhanden, gut der war in dem Beitrag welcher erst heute veröffentlicht wurde durch einen Moderator.. Hier nochmal der Link: Home
CSS-Code ist vorhanden
JS-Code ist vorhanden
HTML liefere ich jetzt nach, aber irgendwie finde ich dort auch nichts aussagekräftiges was den Slider beeinflussen würde. :(

HTML:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <base href="http://bewohner.mwprivatprojekt.de/" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="generator" content="Joomla! - Open Source Content Management" />
  <title>Home</title>
  <link href="http://bewohner.mwprivatprojekt.de/" rel="canonical" />
  <link href="/index.php?format=feed&type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
  <link href="/index.php?format=feed&type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
  <link href="/templates/ju_premart/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
  <link rel="stylesheet" href="/media/system/css/modal.css" type="text/css" />
  <script src="/media/jui/js/jquery-migrate.min.js" type="text/javascript"></script>
  <script src="/media/system/js/caption.js" type="text/javascript"></script>
  <script src="/media/system/js/mootools-core.js" type="text/javascript"></script>
  <script src="/media/system/js/core.js" type="text/javascript"></script>
  <script src="/media/system/js/mootools-more.js" type="text/javascript"></script>
  <script src="/media/system/js/modal.js" type="text/javascript"></script>
  <script src="/media/jui/js/bootstrap.min.js" type="text/javascript"></script>
  <script type="text/javascript">
jQuery(window).on('load',  function() {
				new JCaption('img.caption');
			});
		jQuery(function($) {
			SqueezeBox.initialize({});
			SqueezeBox.assign($('a.modal').get(), {
				parse: 'rel'
			});
		});
  </script>

<link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/media/jui/css/bootstrap.css" />
<link rel="stylesheet" href="/templates/ju_premart/css/basics.css" type="text/css" />
<link rel="stylesheet" href="/templates/ju_premart/css/load.css " type="text/css" />
<link rel="stylesheet" href="/templates/ju_premart/css/fluid.css " type="text/css" />
<link rel="stylesheet" href="/templates/ju_premart/css/menu.css" type="text/css" />
<link rel="stylesheet" href="/templates/ju_premart/css/template.css" type="text/css" />
<link rel="stylesheet" href="/templates/ju_premart/css/setts.css" type="text/css" />
<link rel="stylesheet" href="/templates/ju_premart/css/elements.css" type="text/css" />
<link rel="stylesheet" href="/templates/ju_premart/css/social.css" type="text/css" />
<link rel="stylesheet" href="/templates/ju_premart/css/typo.css" type="text/css" />
<script type="text/javascript" src="/templates/ju_premart/js/script.js"></script>
<script type="text/javascript" src="/templates/ju_premart/js/jquery.min.js"></script>
<style type="text/css">
header > .wrapper, #system-message-container, #ju-header, #main, footer,.ju_spB, #ju_headerWrapper { max-width: 1200px; }
body, #copyright { color: #; background: #;}
#ju-headerout { color: #; background: #;}
#header { color: #; background: #;}
#header a { color: #; } 
.row_main > div { color: #; background: #;}
.row_main > div a { color: #; }
.row_main > div a:hover { color: #; }
</style>
<!-- Pulled from http://code.google.com/p/html5shiv/ -->
<!--[if lt IE 9]>
<script src="/templates/ju_premart/js/html5.js"></script>
<![endif]-->

<script type="text/javascript" src="/templates/ju_premart/js/jquery.flexslider.js"></script>
<link rel="stylesheet" href="/templates/ju_premart/css/flexslider.css" type="text/css" media="screen" />
<script type="text/javascript">
$(window).load(function() {
$('#index-slider').flexslider({
animation: "fade",  
slideDirection: "",  
slideshow: true,              
slideshowSpeed: 4500,      
animationDuration: 500,
directionNav: true, 
controlNav: false  
});	
});
</script>
	
<!--[if lt IE 9]>
<link rel="stylesheet" href="/templates/ju_premart/css/ie_fixes.css.php" type="text/css" /><link rel="stylesheet" href="/templates/ju_premart/css/ie9.php" type="text/css" media="screen,projection" />
<![endif]-->

</head>

<body id="body">
<div id="siteWrapper">
<header id="header">
<div class="wrapper container">
<div class="siteLogo">		
				
<a class="textLogo" href="/">Beispielseite</a>
</div>


<div class="cleartBoth"></div>
</div>
</header>

<div id="mainMenu">
<div id="main">

</div>
</div>
<div id="system-message-container">
	</div>


<div id="ju-headerout">
<div id="ju-header">

<div class="flexslider" id="index-slider">
<ul class="slides">
<li>
<img src="/templates/ju_premart/header/header01.jpg" alt="" /></li>
<li>
<img src="/templates/ju_premart/header/header02.jpg" alt="" /></li>
</ul><!--END UL SLIDES-->

</div><!--END FLEXSLIDER-->
	
</div>
</div>
	
<!-- No Slides -->

<div id="main">
<div class="wrapper container">
<div id="social-bookmarks">
<ul class="social-bookmarks">
</ul>
</div> 
<div class="clear"></div>
<section>
<div class="row_main">
<div class="ju_componentContent ju_componentWidth_4">
<div class="inner">

<div class="blog-featured">

		<h1 class="title">Home</h1>
		
<div style="clear:both"></div>

</div>


</div>
</div>
<div class="cleartBoth"></div>
</div>
</section>
<div class="ju_clearFL"></div>
</div>
</div>
<div class="ju_spB"></div>
<footer>
<section>  
<div id="copyright" class="clearfix"><!--copyright starts here-->
Copyright © bewohner.mwprivatprojekt.de. 
<br />
<!--   -->
</div><!--copyright ends here-->  
</section>
</footer>
</div>

<script src="/templates/ju_premart/js/jquery.mob.js"></script> 
<script>
// Convert menu to select-list for small displays
jQuery(document).ready(function() {
jQuery('ul.menu').mobileMenu({switchWidth:787, prependTo: '#mainMenu', topOptionText: 'Select a Page'});
});
</script>

</body>
</html>
 
Der Slider ist schon mittig - nur sind deine Bilder nicht breit genug, um den ganzen Slider auszufüllen.

Du könntest den <img> in der flexslider.css (ab Zeile 13) ein margin: 0 auto; geben...
 
Genau, was ich gesucht habe, hab großen Dank! :)
Die Steuerelemente hab ich nachgezogen und nun ist es perfekt, danke danke danke. :)
 
Zuletzt bearbeitet:
Zurück
Oben