Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Dec 2013
    Posts
    22
    Thanks
    22
    Thanked 0 Times in 0 Posts

    Need help with a slideshow

    Hi,I'm trying to code a site and I want a slideshow with 3 images in it right under the navigation bar.
    The images I want to use are:
    http://imageshack.com/a/img35/1662/dfm8.png
    http://imageshack.com/a/img690/3348/oz5i.png
    http://imageshack.com/a/img837/5570/y660.png
    I want the slide show to have next and prev buttons,these are the images I want to use:
    http://imageshack.com/a/img853/2941/h250.png
    http://imageshack.com/a/img855/1557/p1bj.png
    This is my html code:
    Code:
    <!DOCTYPE html>
    <html>
    
    <head>
    
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="bootstrap/css/NewSenso.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css' />
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css' />
    
    </head>
    <body>
    	<div class="header">
    				
    				<div class="logo">
    					<p class="senso">Senso</p>
    				</div>
    				
    				<div class="navbar">
    					<a href="DOWNLOADURL" class="styled-button" onclick="javascript:window.location.href='#shome'; return false;"> HOME </a> <!-- Am bagat "onclick" pt ca astea o sa fie un fel de toolbar care o sa fie mobil,daca dai scrol in jos astea 6 o sa coboare cu ecranul si cand dai click pe "home"  te duce sus,cand dai click pe "portoflio" te duce la portofoliu,etc -->
    					<a href="DOWNLOADURL" class="styled-button" onclick="javascript:window.location.href='#sportfolio'; return false;"> PORTFOLIO </a>
    					<a href="DOWNLOADURL" class="styled-button" onclick="javascript:window.location.href='#sservices'; return false;"> SERVICES </a>
    					<a href="DOWNLOADURL" class="styled-button" onclick="javascript:window.location.href='#saboutus'; return false;"> ABOUT US </a>
    					<a href="DOWNLOADURL" class="styled-button last" onclick="javascript:window.location.href='#scontact'; return false;"> CONTACT </a>
    				</div>
        <div class="container">
    	    
    	</div>
    </body>
    </html>
    And this is my css code:
    Code:
    .logo {
    	float: left;
    }
    .navbar {
    	margin-top: 12px;
    	float: right;
    	line-height: 50px;
    	padding-right: 5%;
    }
    
    .navbar a {
    	padding: 0 10px;
    }
    
    .navbar .last {
    	padding-right: 0;
    }
    .styled-button
    {
        font-family: "Raleway",sans-serif;
        font-size:14px;
        color:#000000;
        border:none;
        text-decoration:none;
    	padding-right: 5%;
    }
    .styled-button:hover{
        color:#13ACD9;
        text-decoration:none;
    }
    .logo{
        font-family: "Raleway",sans-serif;
        font-weight: 300; 
        font-size:48px;
        color:#13ACD9;
    	padding-left:10%;
    }
    .header{
        height: 70px;
        background: white;
    	border-width: 1px;
    	border-bottom: 1px solid #13ACD9;
    	position: fixed;
    	top: 0;
    	width: 100%;
    	z-index:3;
    }
    This is how it should look like in the end:
    http://i60.tinypic.com/124zj83.png

    I need it to be responsive too

    Please help me.
    Last edited by VIPStephan; 02-08-2014 at 07:14 PM. Reason: added code BB tags

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,629
    Thanks
    6
    Thanked 1,002 Times in 975 Posts
    In future, if you post any code please put it in between [CODE][/CODE] tags. It makes scanning your posts much easier. You can do this by clicking the small ‘#’ icon above the reply field.

    Also, CodingForums is not a free coding service. Setting up a slideshow and doing it properly is a fairly complex task where you have to understand what you are doing (well, you have to at any time when creating a website). Unfortunately there are people that create pre-made scripts that make it seem simple by just copy-pasting something together, and this is why the internet consists of so much crap nowadays.

    That said, if you have no idea how to work with JavaScript and how to set up a slideshow, and aren’t willing or able to find out by yourself by using a search engine, then I really suggest you hire someone who knows what to do.
    But to not be a complete a** I’m going to give you a link to a decent script: http://jquery.malsup.com/cycle2/. You have to figure out the rest by yourself, though. And please, please, try to understand what this does and how to use it properly.

  • Users who have thanked VIPStephan for this post:

    Bitzu (02-08-2014)


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •