• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi
Zapytaj

baner jquery

0 głosów
786 wizyt
pytanie zadane 27 czerwca 2015 w Rozwój zawodowy, nauka, praca przez Eimens Maniak (69,240 p.)
Hej, poszukuję jakiegoś super banalnego banera 1200x400 który bęzie co np 2 sec zmieniał grafikę i miał pod spodem kilka kropek w zależności ile dam zdjęć i oczywiście miał otwartą licencję żebym mógł użyć go na swojej stronie. :)

1 odpowiedź

+1 głos
odpowiedź 27 czerwca 2015 przez Comandeer Guru (607,960 p.)
wybrane 9 lipca 2015 przez Eimens
 
Najlepsza
http://owlgraphic.com/owlcarousel/

http://docs.dev7studios.com/jquery-plugins/nivo-slider

Ogólnie każdy "jQuery slider" z Google się powinien nadać ;)
 komentarz 27 czerwca 2015 przez Eimens Maniak (69,240 p.)

ten pierwszy link coś nie rozumiem :/ 

http://owlgraphic.com/owlcarousel/demos/one.html

Wkleiłem: 

  1. $(document).ready(function() {
  2.  
  3. $("#owl-demo").owlCarousel({
  4.  
  5. navigation : true, // Show next and prev buttons
  6. slideSpeed : 300,
  7. paginationSpeed : 400,
  8. singleItem:true
  9.  
  10. // "singleItem:true" is a shortcut for:
  11. // items : 1,
  12. // itemsDesktop : false,
  13. // itemsDesktopSmall : false,
  14. // itemsTablet: false,
  15. // itemsMobile : false
  16.  
  17. });
  18.  
  19. });

 

  1. <div id="owl-demo" class="owl-carousel owl-theme">
  2.  
  3. <div class="item"><img src="assets/fullimage1.jpg" alt="The Last of us"></div>
  4. <div class="item"><img src="assets/fullimage2.jpg" alt="GTA V"></div>
  5. <div class="item"><img src="assets/fullimage3.jpg" alt="Mirror Edge"></div>
  6.  
  7. </div>

 

 

 

  1. #owl-demo .item img{
  2. display: block;
  3. width: 100%;
  4. height: auto;
  5. }

i to nie działa :/ ustawiają się jeden pod drugim :/ 

 

 komentarz 27 czerwca 2015 przez Comandeer Guru (607,960 p.)
Dołączyłeś jQuery?
 komentarz 27 czerwca 2015 przez Eimens Maniak (69,240 p.)
<script src="jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function() {
 
  $("#owl-demo").owlCarousel({
 
      navigation : true, // Show next and prev buttons
      slideSpeed : 300,
      paginationSpeed : 400,
      singleItem:true
 
      // "singleItem:true" is a shortcut for:
      // items : 1,
      // itemsDesktop : false,
      // itemsDesktopSmall : false,
      // itemsTablet: false,
      // itemsMobile : false
 
  });
 
});
</script>

Dołączyłem to na dole html'a
 komentarz 27 czerwca 2015 przez Eimens Maniak (69,240 p.)

jquery-1.11.3.min.js a to jest w folderze ze stroną 

 komentarz 27 czerwca 2015 przez Comandeer Guru (607,960 p.)
Skrypt z owl też dołączyłeś?

Konsola przeglądarki coś rzuca?
 komentarz 27 czerwca 2015 przez Eimens Maniak (69,240 p.)
<!DOCTYPE HTML>
<html lang="pl">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    
    <title>Mały Bus</title>
    
    <meta name="description" content="Opis w Google" />
    <meta name="keywords" content="słowa, kluczowe, wypisane, po, porzecinku" />
    
    <link rel="Stylesheet" type="text/css" href="style.css" />
    <link rel="Stylesheet" type="text/css" href="css/fontello.css" />

    <link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
</head>

<body>
    <div class="nav">
        <div class="logo">Logo</div>

            <a href="#">Firma Mały-Bus</a>
            <a href="#">Oferta</a>
            <a href="#">Flota</a>
            <a href="#">Wynajem</a>
            <a href="#">Referencje</a>
            <a href="#">Kontakt</a>

        <div style="clear:both;"></div>
    </div>
    <div id="owl-demo" class="owl-carousel owl-theme">
 
  <div class="item"><img src="baner.jpg" alt="The Last of us"></div>
  <div class="item"><img src="baner.jpg" alt="The Last of us"></div>
 
</div>
    <div class="content">
        <div class="tile1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consequat condimentum lorem, ut efficitur elit aliquet et. Sed nec tempor nisl. Sed ultrices ex nec varius vestibulum. Fusce mollis erat ut sem aliquet, a scelerisque quam volutpat. Duis neque erat, tempus at varius et, sodales id tellus. Nullam facilisis lacinia convallis. Pellentesque eu urna sed nisl dapibus hendrerit eu non lacus. Donec facilisis facilisis libero vel commodo. Nullam ut dui sit amet elit laoreet commodo. Donec cursus metus nec elementum gravida. Proin placerat mauris a orci dignissim tempor eget maximus metus. Maecenas ut purus pharetra, porttitor diam sed, bibendum eros. Vivamus sodales est tempor massa iaculis, in malesuada magna gravida. Morbi maximus, leo a cursus consequat, lectus nibh vehicula risus, at ornare velit turpis at arcu. Suspendisse varius a dolor eu sollicitudin.</div>
        <div class="tile1">Tutaj będzie jakaś grafika :) </div>
        <div style="clear:both;"></div>
        <div class="tile2"><i class="icon-users"></i><br />MIKROBUSY TURYSTYCZNE wynajem</div>
        <div class="tile2"><i class="icon-bus"></i><br />ATRAKCYJNE CENY<br />zapraszamy do współpracy</div>
        <div class="tile2"><i class="icon-mail"></i><br />AUTOKARY TURYSTYCZNE wynajem</div>
        <div style="clear:both;"></div>
        <div class="footer">Strona wykonana przez Patryk Talarek &copy; 2015<i class="icon-connectdevelop">    </i></div>
    </div>
<script src="jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function() {
 
  $("#owl-demo").owlCarousel({
 
      navigation : true, // Show next and prev buttons
      slideSpeed : 300,
      paginationSpeed : 400,
      singleItem:true
 
      // "singleItem:true" is a shortcut for:
      // items : 1,
      // itemsDesktop : false,
      // itemsDesktopSmall : false,
      // itemsTablet: false,
      // itemsMobile : false
 
  });
 
});
</script>
</body>
</html>
 komentarz 27 czerwca 2015 przez Comandeer Guru (607,960 p.)
Nie masz dołączonego skryptu z owl - powinien być po jQuery
 komentarz 27 czerwca 2015 przez Eimens Maniak (69,240 p.)
<script src="jquery-1.11.3.min.js"></script>
<script src="owl.carousel.min.js"></script>
<script>

Coś takiego ?
 komentarz 27 czerwca 2015 przez Comandeer Guru (607,960 p.)
Nom, coś takiego
 komentarz 27 czerwca 2015 przez Eimens Maniak (69,240 p.)
Nie działa wrzuciłem to do folderu, i zrobiłem odniesienie i lipa, dalej dwa elementy jeden pod drugim ... :/
 komentarz 27 czerwca 2015 przez Comandeer Guru (607,960 p.)
Pokaż gdzieś to/podeślij pliki
 komentarz 27 czerwca 2015 przez Eimens Maniak (69,240 p.)
http://sendfile.pl/pokaz/407154---mN9q.html
 komentarz 27 czerwca 2015 przez Comandeer Guru (607,960 p.)
Mam wrażenie, że chciałeś to zrobić ciut na pałę, bez czytania tego: http://owlgraphic.com/owlcarousel/#how-to

Wersja działająca: http://sendfile.pl/pokaz/407164---qbkl.html
 komentarz 27 czerwca 2015 przez Eimens Maniak (69,240 p.)
Zauważyłem że ten baner jest tak o 5px na prawo przesunięty... jak dam zuma na stronę i oddale to układa się równo, o co kamon ?
 komentarz 27 czerwca 2015 przez Comandeer Guru (607,960 p.)
Prawdę mówiąc nie widzę tego - u mnie od początku jest poprawnie wyświetlony.
 komentarz 27 czerwca 2015 przez Eimens Maniak (69,240 p.)
To pewnie wina google Chroma :) Dziękuję ślicznie :)

Podobne pytania

0 głosów
1 odpowiedź 306 wizyt
problem z jquery
pytanie zadane 31 maja 2015 w JavaScript przez jaca121212 Nałogowiec (40,760 p.)
+1 głos
3 odpowiedzi 818 wizyt
Czy można w jakiś sposób przyspieszyć ładownie strony w jquery
pytanie zadane 30 maja 2015 w JavaScript przez jaca121212 Nałogowiec (40,760 p.)
0 głosów
1 odpowiedź 247 wizyt
Problem ze zmiana .css w jquery
pytanie zadane 30 maja 2015 w JavaScript przez jaca121212 Nałogowiec (40,760 p.)

93,742 zapytań

142,678 odpowiedzi

323,297 komentarzy

63,326 pasjonatów

Kategorie pytań
Programowanie
Sprzęt komputerowy
Systemy operacyjne, programy
Sieci komputerowe
Hostingi, domeny, usługi
Urządzenia mobilne
Bezpieczeństwo, hacking
Rozwój zawodowy, nauka, praca
Egzaminy zawodowe
Matematyka, fizyka, logika
Grafika i multimedia
Ogłoszenia, zlecenia
Nasze projekty
Nasze poradniki
Sprawy forum
Offtop
Programowanie
C i C++ HTML i CSS JavaScript PHP SQL, bazy danych C# Java SPOJ Python Ruby Assembler Visual Basic Android, Swift, Symbian OpenGL, Unity Inne języki Algorytmy Systemy CMS Mikrokontrolery

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Twierdza Linux. Bezpieczeństwo dla dociekliwych

Aby uzyskać rabat -10%, użyjcie kodu pasja-linux, wpisując go w specjalne pole w koszyku.

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci

Snow Theme by Q2A Market
Powered by Question2Answer
...