Flexslider-Bilder werden nicht angezeigt

trixy

Erst mal ein herzliches "Hallo" an alle :D bin neu hier, aber als Wordpress-Anfängerin hat mir hier der ein oder andere Beitrag sehr geholfen - tolles Forum mit hilfreichen Antworten. Leider konnte ich hier in der Suche mein Problem leider nicht finden, deshalb erstelle ich jetzt mal einen neuen Thread.

Ich habe das Problem, dass ich einen Flexslider in mein eigenes Theme auf der Startseite einbinden wollte, jedoch werden die Bilder nicht angezeigt, sondern nur der Rahmen des Sliders. Vielleicht kann mir jemand erklären, warum dies so ist. Verzweifel schon seit Stunden und finde den Fehler mittels Firebug einfach nicht. Die Startseite habe ich mit einer "front-page.php" angelegt.

Hier ist der Code für die header.php:

PHP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//DE" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head profile="http://gmpg.org/xfn/11">


<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.flexslider-min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>


<script type="text/javascript">
    $(document).ready(function () {
        $('.flexslider').flexslider({
            animation: 'fade',
            controlsContainer: '.flexslider'
        });
    });
</script>
 
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
 
<title><?php wp_title(); ?> - <?php bloginfo('name'); ?></title>


<link rel="stylesheet" href="wp-content/themes/eigenes/slider/slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
  
<?php wp_head(); ?>
 
</head>


<body>

Alles anzeigen

Code für die front-page.php:

PHP

<?php get_header(); ?>


<div id="sidebar">
      <?php get_sidebar(); ?>
</div>
 
<div id="content">


   <div class="flex-container">
    <div class="flexslider">
        <ul class="slides">
        <li><img src="<?php echo get_template_directory_uri(); ?>/img/slide1.jpg"/></li>
        <li><img src="<?php echo get_template_directory_uri(); ?>/img/slide2.jpg"/></li>
        <li><img src="<?php echo get_template_directory_uri(); ?>/img/slide3.jpg"/></li>
        </ul>
    </div>
  </div>


</div>


<?php get_footer(); ?>

Alles anzeigen

Code für die slider.css:

Code

.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  { outline: none; }
 
.slides,
.flex-control-nav,
.flex-direction-nav {
    margin: 0;
    padding: 0;
    list-style: none;
}
 
.flexslider a img { outline: none; border: none; }


 
.flexslider {
    position: relative;
    zoom: 1;
    padding: 10px;
    background: #000;
    text-align:center; 
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
 
    -webkit-box-shadow: 0px 1px 1px rgba(0,0,0, .2);
    -moz-box-shadow: 0px 1px 1px rgba(0,0,0, .2);
    box-shadow: 0px 1px 1px rgba(0,0,0, .2);
}


.flexslider .slides > li {
    display: none;
    -webkit-backface-visibility: hidden;
}
 
.flexslider .slides img {
    width: 1180px;
    height: 500px;
    display: block;
    z-index:199;
    
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}


.slides:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
 
html[xmlns] .slides { display: block; }
* html .slides { height: 1%; }


.flex-container {
    min-width: 500px;
    width: 1200px;
}
 
.flexslider .slides { zoom: 1; }


.flex-direction-nav a {
    display: block;
    position: absolute;
    margin: -17px 0 0 0;
    width: 35px;
    height: 35px;
    top: 50%;
    cursor: pointer;
    text-indent: -9999px;
    z-index:200;
 
    background-color: #333;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#333), to(#555));
    background-image: -webkit-linear-gradient(top, #333, #555);
    background-image: -moz-linear-gradient(top, #333, #555);
    background-image: -o-linear-gradient(top, #333, #555);
    background-image: linear-gradient(to bottom, #333, #555);
}


.flex-direction-nav a:before {
    display: block;
    position: absolute;
    content: '';
    width: 9px;
    height: 13px;
    top: 11px;
    left: 11px;
    background: url("./img/arrows.png") no-repeat;
    z-index:201;
}
 
.flex-direction-nav a:after {
    display: block;
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    top: 35px;
}


.flex-direction-nav .flex-next {
    right: -5px;
 
    -webkit-border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
    border-radius: 3px 0 0 3px;
}
 
.flex-direction-nav .flex-prev {
    left: -5px;
 
    -webkit-border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0;
}
 
.flex-direction-nav .flex-next:before { background-position: -9px 0; left: 15px; }
.flex-direction-nav .flex-prev:before { background-position: 0 0; }
 
.flex-direction-nav .flex-next:after {
    right: 0;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #31611e;
}
 
.flex-direction-nav .flex-prev:after {
    left: 0;
    border-bottom: 5px solid transparent;
    border-right: 5px solid #31611e;
}


.flexslider .flex-control-nav {
    position: absolute;
    width: 100%;
    bottom: -40px;
    text-align: center;
    margin: 0 0 0 -10px;
}
 
.flex-control-nav li {
    display: inline-block;
    zoom: 1;
}
 
.flex-control-paging li a {
    display: block;
    cursor: pointer;
    text-indent: -9999px;
    width: 12px;
    height: 12px;
    margin: 0 3px;
    background-color: #b6b6b6 \9;
 
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
 
    -webkit-box-shadow: inset 0 0 0 2px #b6b6b6;
    -moz-box-shadow: inset 0 0 0 2px #b6b6b6;
    box-shadow: inset 0 0 0 2px #b6b6b6;
}
 
.flex-control-paging li a.flex-active {
    background-color: #333;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#333), to(#555));
    background-image: -webkit-linear-gradient(top, #333, #555);
    background-image: -moz-linear-gradient(top, #333, #555);
    background-image: -o-linear-gradient(top, #333, #555);
    background-image: linear-gradient(to bottom, #333, #555);
 
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}


.flexslider .slides p {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 0 5px;
    margin: 0;
 
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 20px;
    color: white;
 
    background-color: #222222;
    background: rgba(0,0,0, .9);
 
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

Alles anzeigen

Falls jemand mir helfen könnte, wäre das wirklich klasse :D danke schon mal vieeelmals im Voraus...

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

gericoach

slider korrekt eingerichtet?

trixy

Danke für deine schnelle Antwort, gericoach :)

Also die Pfade sind alle richtig (als erstes überprüft). Ich finde den Fehler einfach nicht.

Vielleicht noch zur näheren Erläuterung:

Wenn ich jetzt in der CSS bei ".flexslider .slides > li" das "display: none" wegnehme, werden die Bilder untereinander angezeigt, aber das ist ja nicht der Sinn der Sache ;) dann ist es wohl eher ein JavaScript-Problem?!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Flexslider-Bilder werden nicht angezeigt

Jetzt mitmachen!