Accordian Slider

Community Forums Forums Design Tips and Tricks Accordian Slider

This topic is: resolved

This topic contains 1 reply, has 2 voices, and was last updated by  Susan 3 months, 2 weeks ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #115473

    jenglish647
    Participant
    Post count: 23

    If anybody out there can help with this I would greatly appreciate it. So I’ve got some code to add that will create an accordion type slider. The html is:
    [html]<!DOCTYPE html>
    <!–[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]–>
    <!–[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]–>
    <!–[if IE 8]> <html class="no-js lt-ie9"> <![endif]–>
    <!–[if gt IE 8]><!–> <html class="no-js"> <!–<![endif]–><head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="_css/main.css">
    </head>

    <div class="accordian">
    <ul>
    <li>
    <div class="image_title">
    <a href="#">IMG 1</a>
    </div>
    <a href="#">
    <img src="_img/mountain_1.jpg" />
    </a>
    </li>
    <li>
    <div class="image_title">
    <a href="#">IMG 2</a>
    </div>
    <a href="#">
    <img src="_img/mountain_2.jpg" />
    </a>
    </li>
    <li>
    <div class="image_title">
    <a href="#">IMG 3</a>
    </div>
    <a href="#">
    <img src="_img/mountain_3.jpg" />
    </a>
    </li>
    </ul>
    </div>
    </body>
    </html>[/html]

    AND the CSS is this:
    [css]
    /*Now the styles*/
    * {
    margin: 0;
    padding: 0;
    }
    body {
    background: #ccc;
    font-family: arial, verdana, tahoma;
    }

    /*Time to apply widths for accordian to work
    Width of image = 640px
    total images = 5
    so width of hovered image = 640px
    width of un-hovered image = 40px – you can set this to anything
    so total container width = 640 + 40*4 = 800px;
    default width = 800/5 = 160px;
    */

    .accordian {
    width: 805px; height: 320px;
    overflow: hidden;

    /*Time for some styling*/
    margin: 100px auto;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
    }

    /*A small hack to prevent flickering on some browsers*/
    .accordian ul {
    width: 2000px;
    /*This will give ample space to the last item to move
    instead of falling down/flickering during hovers.*/
    }

    .accordian li {
    position: relative;
    display: block;
    width: 160px;
    float: left;

    border-left: 1px solid #888;

    box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);

    /*Transitions to give animation effect*/
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    /*If you hover on the images now you should be able to
    see the basic accordian*/
    }

    /*Reduce with of un-hovered elements*/
    .accordian ul:hover li {width: 40px;}
    /*Lets apply hover effects now*/
    /*The LI hover style should override the UL hover style*/
    .accordian ul li:hover {width: 640px;}

    .accordian li img {
    display: block;
    }

    /*Image title styles*/
    .image_title {
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 0; bottom: 0;
    width: 640px;

    }
    .image_title a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 20px;
    font-size: 16px;
    }[/css]

    I put the html into the simple hooks plugin under the header and then added the css to the main stylesheet but something went wrong. Slideshow

    Any ideas? GREATLY appreciated.

    #118077

    Susan
    Moderator
    Post count: 9406

    Closing this, as you have marked it as “resolved”. Go ahead and create a new post if you are still having issues.


    Susan @ Graphically Designing I offer theme customizations I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

Viewing 2 posts - 1 through 2 (of 2 total)

The topic ‘Accordian Slider’ is closed to new replies.