Jak zrobić taki slider?

0

jak w temacie, taki co jest w załączniku

Bez tytułu.png

1

Czy możesz udostępnić link, gdzie to znalazłeś? Często w kodzie można znaleźć informację, z czego autor strony korzystał. Wtedy będziezz miał dokładnie taki sam skrypt :)

0

tylko ze to nie jest strona tylko psd... http://www.codepixar.com/downloads/pixels-app-landing-home-page/

0

chcę dodać ten slider stąd github.com/paizai/monte, przerzuciłem zdjęcia do folderu ze swoim html, bo w zipie były luzem , kod skopiowałem style i script w headzie i to z body dodałem do swojej strony, wrzuciłem pliki js do innych plików js, tylko, że w php stormie mam na czerwono te pliki, nie wiem co to znaczy, wie ktoś? Nawet po dodaniu ich w <script> w htmlu tak mam, chciałem też dodać w tej lokalizacji gdzie jest moja strona bo w zipie wszystko jest w 1 folderze i też było źle.

Z htmla w tej linii:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

wyświetla mi się:

There is no locally stored library for the HTTP link.

To mam po prostu pobrać package jquery 1.7.0? Albo czy mogę dodać link do lepszej wersji?

0

ściągnąłem slick slider http://kenwheeler.github.io/slick/, jednak jak wkleiłem:

$(document).ready(function(){
  $('.your-class').slick({
    setting-name: setting-value
  });
});

to podkreśla mi your-class, wie ktoś czemu? W ogóle zamiast slidera na stronie mam 3 zdjęcia, jedno pod drugim. Jak najeżdżam myszką to nie wyskakuje mi żaden komunikat...

1

to podkreśla mi your-class,

Ty tak serio? Przecież to tylko przykład i masz podać nazwę swojej klasy. Na stronie masz przecież demo.

0

jakis koles na yt robil z tego przykladu i mu cos wyszlo - www.youtube.com/watch?v=SzMChncXTgA&t=32s, ta klasa to tez nazwa klasy ktora mam uzyta

0

Może pokaż swój kod to będzie łatwiej.

0
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Gulp Starter Kit</title>
    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
    <!-- build:css -->
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- endbuild -->
</head>
<body>
<section id="section1">

    <div class="section1-2" style="width: 50%; float:left">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="collapse navbar-collapse justify-content-center" id="navbarNavAltMarkup">
                <div class="navbar-nav">
                    <a class="nav-item nav-link active" href="#">Giant <span class="sr-only">(current)</span></a>
                </div>
            </div>
        </nav>
        <div class="section1-3">
            <div class="section1-4">
                <div>A powertful & Unique App Landing Template
                </div><!--nagranie 2 53 17, week4 tlumaczy jak wycenrowac -->
                <div>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel faucibus magna.
                </div>
                <div>
                    <i class="fa fa-check-circle" style="color:white"></i> Unlimited colors, banner with images, slider
                    or video
                </div>
                <div>
                    <i class="fa fa-check-circle" style="color:white"></i> Fully Responsive and powered by HTML5 and CS3
                </div>
                <div>
                    <i class="fa fa-check-circle" style="color:white"></i> Very easy to customize : set up in minutes
                </div>

            </div>
        </div>

    </div>
    <div style="width: 50%; float:right">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="collapse navbar-collapse justify-content-center" id="navbarNavAltMarkup">
                <div class="navbar-nav">
                    <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
                    <a class="nav-item nav-link" href="#">Features</a>
                    <a class="nav-item nav-link" href="#">Pricing</a>
                    <a class="nav-item nav-link disabled" href="#">Disabled</a>
                </div>
            </div>
        </nav>
    </div>

</section>

<section id="section2">
    <div class="grid-container">
        <div class="item">
            <span></span>
            <div>
                <div>Sell any product online</div>
                <div>Over 92% of computers are infected with Adware and spyware. Such software is</div>
            </div>
        </div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
</section>

<section id="section4">
    <div class="section4-1" style="width: 50%; float:left">
        <img src="img/2.jpg" alt=”alternate text”>
    </div>
    <div class="section4-2" style="width: 50%; float:right">
        <div>
            We don't leave you stranded
            Everyone's reasons for learning user interface design are different. If you're already a developer, or a PM
            or a UX designer, why develop this totally separate skill?
        </div>
        <div>
            <div>Everyone's reasons for learning user interface design are different. If you're already a developer, or
                a PM
                or a UX designer, why develop this totally separate skill? If you're already a developer, or a PM
                or a UX designer
            </div>
            <div><i class="fa fa-check-circle" style="color:black"></i>&nbsp;&nbsp;&nbsp;Unliimited colors, bannes with
                images, slider or video
            </div>
            <div><i class="fa fa-check-circle" style="color:black"></i>&nbsp;&nbsp;&nbsp;Fully Responsive and powered by
                HTML5 and CS3
            </div>
            <div><i class="fa fa-check-circle" style="color:black"></i>&nbsp;&nbsp;&nbsp;Very easy to customize : set up
                in minutes
            </div>
        </div>
    </div>
</section>
<section id="section45">
</section>
<section id="section5">
    <div>We've got the perfect package for you
        Evryone's reasons for learning user interface design are different if you're already a developer, or a PM, or a
        UX deigner, why develop this totally separate skill?
    </div>
    <div class="section5-2">
        <div class="section5-1">Basic</div>
        <div class="section5-1 base">Standard</div>
        <div class="section5-1">Premium</div>
        <div class="section5-1">Enterprise</div>
    </div>
    <img src="img/1.jpg" width="1350">
</section>
<section id="section6">
    <object width="1350" height="344" data="https://www.youtube.com/embed/F9Bo89m2f6g"></object>
</section>
<section id="section7">
    <div class="your-class">
        <div><img src="img/1.jpg" width="200" height="200"></div>
        <div><img src="img/2.jpg" width="200" height="200"></div>
        <div><img src="img/3.jpg" width="200" height="200"></div>
    </div>
</section>
<section id="section8"></section>


<!-- build:js -->

<script src="js/plugins.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

<script src="js/script.js"></script>

<!-- endbuild  -->
<script type="text/javascript" src="http//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('.your-class').slick({
            arrows: false
        });
    });
</script>
</body>

</html>

1

Jeśli przegrałeś folder 'slick' i masz tam kod do js i css to popraw linki do jquery:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

Brakuje dwukropków w adresie.

--Edit--
No i niepotrzebnie powtarzasz kod
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

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

Albo jedno albo drugie. Chociaż to pierwsze jest niepoprawnie użyte, zgodnie z tym co masz podane w instrukcji. Najpierw dajesz jquery, później slick.

0

Jeśli chodzi o powtarzanie kodu to usunąłem tą pierwszą linijkę to wtedy miałem jeden obrazek zamiast trzech, ale nie mogę przewijać zdjęć, z bibliotekami jak dodałem dwukropki to wyskakiwał jakiś błąd, że tam nie ma tej biblioteki czy coś takiego, kliknąłem tam by pobrało te biblioteki ale dalej nie moge zmieniać zdjęć. W załączniku dodałem co mi wyskoczyło z tymi bibliotekami... Ale dodałem dots: true i jak klikam kropki to działa!

1

Nie korzystałem z php storm ale to nie błąd tylko ostrzeżenie. Komunikaty o braku biblioteki lokalnie do auto uzupełniania itp. Nie ma wpływu na działanie strony.
Jeśli masz jeden obrazek to znaczy że ci działa. Teraz możesz myszką przesuwać na boki. Potrzebujesz innego widoku to masz całą konfigurację opisaną...

0

korzystalem z tego filmiku https://www.youtube.com/watch?v=SzMChncXTgA&t=32s i jak ustawiam by byly strzalki to jest tylko ta po prawej, jak ustawie szerokosc sekcji na 90% to nie ma zadnej, a jak mam na 100% to jest wlasnie ta po prawej, tylko ze jak ja dodaje to mi sie strona poszerza w prawo, wie ktos czemu tak jest i jak zrobic by byly 2 strzalki?

1

Nie sprawdzałem ale może trzeba dodać ustawienia żeby wyszła karuzela, inaczej może masz przesuwanie i dla pierwszego zdjęcia jest tylko strzałka w prawo.

0

juz dziala, po prostu wzialem 90% szerokosci i ustawilem margin auto..., jednak potrzeba mi jeszcze innego slidera, probowalem wziac z tych stron ale jak robie to co tam jest to mi nie dziala: https://bkosborne.com/jquery-waterwheel-carousel https://www.jqueryscript.net/rotator/Simplest-3D-Image-Carousel-Plugin-For-jQuery-Carousel-js.html, w tym pierwszym dolaczalem pliki js to swojego folderu i dodalem je w kodzie..., wie ktos co jest nie tak? Nie wiem moze ma na to wplyw to jakie inne pliki js dodawalem i w jakiej kolejnosci...

1 użytkowników online, w tym zalogowanych: 0, gości: 1