How do i combine html, css and javascript coding to make my carousel work?

47,100

Solution 1

<!DOCTYPE html>
<html lang"en">
  <head>
    <meta charset="utf-8">
    <title>...</title>
    <link rel="stylesheet" type="text/css" href="path/to/your.css" />
    <script src="path/to/your.js"></script>
  </head>
  <body>
   ...your html
  </body>
</html>

I added some things that normally go in the head of an html document, like the charset and lang attributes. Also, this doctype is for html5.

Solution 2

You can reference the code inline or you can link to the files.

To reference everything inline, above your HTML put your CSS between:

<style>

</style>

Then put your javascript between:

<script>

</script>

OR

Save your CSS to a document, say slider.css

Save your javascript to a file called slider.js

Then link to them with:

<link href="slider.css" type="text/css" rel="stylesheet" />

and

<script src="slider.js" type="text/javascript></script>

Note that the above two code snippets have to be placed inside your <head></head> tags

Solution 3

Add this to in the <head> section in html file:

<link rel="stylesheet" href="yourcssfilename.css"/>
<script type="text/javascript" src="yourjsfilename.js"/>
Share:
47,100
James Bowen
Author by

James Bowen

Updated on July 09, 2022

Comments

  • James Bowen
    James Bowen over 1 year

    I have the following code split into html, css and javascript, but i do not know how to combine them in notepad so i can embed it onto my website. (The image sources and texts are just examples.)

    HTML

    <div id="wrapper">
    <div id="text">
        <h3>Geneva International Motor Show</h3>
        <p>The Geneva International Motor Show will open to the public from 03 to       13 March, presenting more than 260 exhibitors and more than 175 world and European premieres. 02 March 2011.<br />
            <small>Source: <a href="http://gigapica.geenstijl.nl/2011/03/geneva_international_motor_sho.html" target="_blank">gigapica.geenstijl.nl</a></small></p>
    </div>
    <div id="images">
        <div id="a">
            <img src="img/car1.jpg" alt="car1" width="275" height="200" />
            <span>The new Swiss Sbarro TwoFort100 Concept car is shown during the press day at the 81st Geneva International Motor Show in Geneva, Switzerland, on 01 March 2011. </span>
        </div>
        <div>
            <img src="img/car2.jpg" alt="car2" width="275" height="200" />
            <span>The new Toyota FT-86 II Concept car on display during the press day at the 81st Geneva International Motor Show in Geneva, Switzerland, 02 March 2011. </span>
        </div>
        <div>
            <img src="img/car3.jpg" alt="car5" width="275" height="200" />
            <span>The new Renault Dezir Concept car is on display during the press day at the 81st Geneva International Motor Show in Geneva, Switzerland, 02 March 2011. </span>
        </div>
        <div>
            <img src="img/car4.jpg" alt="car6" width="275" height="200" />
            <span>The new Dodge Challenger SRT8 392 is on display during the press day at the 81st Geneva International Motor Show in Geneva, Switzerland, 02 March 2011.</span>
        </div>
        <div>
            <img src="img/car5.jpg" alt="car8" width="275" height="200" />
            <span>The new Nissan Esflow Concept car is on display during the press day at the 81st Geneva International Motor Show in Geneva, Switzerland, 02 March 2011. </span>
        </div>
        <div>
            <img src="img/car6.jpg" alt="car9" width="275" height="200" />
            <span>A study of Volkswagen named Bulli is on display at International Geneva Motor Show at the Palexpo fairground in Geneva, Switzerland, 03 March 2011</span>
        </div>
    </div>
    </div>
    

    CSS

     html, body {
        height: 100%;
        padding: 0;
        margin: 0;
        }
        body {
        min-height: 650px;
    }
        body * {
        font-family: Arial, Geneva, SunSans-Regular, sans-serif;
        font-size: 14px;
        color: #333;
        line-height: 22px;
    }
    
        #wrapper {
        width: 825px;
        margin: 0 0 0 -412px;
        position: absolute;
        left: 50%;
        top: 30px;
    }
        #text h3 {
        font-size: 26px;
    }
        #text small, #text small * {
        font-size: 12px;
        color: #666;
    }
        #images {
        width: 900px;
        overflow: hidden;
    }
        #images div, #images img {
        display: block;
        float: left;
        width: 275px;
        height: 200px;
    }
        #images span {
        background-color: black;
        color: #ccc;
        display: block;
        float: left;
        width: 215px;
        height: 160px;
        padding: 40px 30px 0 30px;
        }
    

    Javascript

    $(function() {
        $('#images > div').each(function() {
            var $cfs = $(this);
            $cfs.carouFredSel({
                direction: 'up',
                circular: false,
                infinite: false,
                auto: false,
                scroll: {
                    queue: 'last'
                },
                items: {
                    visible: 1,
                    width: 275,
                    height: 200
                }
            });
            $cfs.hover(
                function() {
                    $cfs.trigger('next');
                },
                function() {
                    $cfs.trigger('prev');
                }
            );
        });
        });
    

    Any help on this would be much appreciated guys!!!

  • James Bowen
    James Bowen about 11 years
    Thanks thats really helpful as i need to learn about headers and such anyway, but it's still not doing what it should, the original carousel was from "coolcarousels.frebsite.nl/c/7" My website is run/created by another company and i am just given an admin area, is this why the javascript doesn't work do you think?
  • dezman
    dezman about 11 years
    The <head> is not the same thing as a header, a header is usually the top part of the page that you see in your browser and is coded in the <body>. There are many possibilities as to why your js doesn't work, I really wouldn't know unless you have a link to the site.
  • James Bowen
    James Bowen about 11 years
    Yeah sorry that's what i meant. With the JS file, im creating it using notepad and changing the filetype to JS at the end, after copying and pasting the javascript code as it is, is there anything i need to put in the notepad document to specify that this is a javascript function?
  • dezman
    dezman about 11 years
    no, what you have is okay, but it is using jquery, which you also need to link to from your html.
  • James Bowen
    James Bowen about 11 years
    Sorry for being "basic in the head", but how would i do that?
  • dezman
    dezman about 11 years
    google jquery, download it, put a link to it in your html document.