Views Slideshow
About this module
You could use the Views Slideshow module for this. Here is a quote from its project page:
... can be used to create a slideshow of any content (not just images) that can appear in a View. Powered by jQuery, it is heavily customizable: you may choose slideshow settings for each View you create.
Potential uses:
- News item slideshow (such as the title, image and teaser of the last 5 news articles submitted).
- The Last X number of X submitted (images, videos, blog entries, forum posts, comments, testimonials, etc.).
- Rotate any image, based on any filters you can apply in views.
- Hottest new products for any ecommerce drupal site.
- Rotate contact links, share links, etc.
- You could rotate entire nodes, categories, image galleries, etc. I wouldn't suggest it, but you have that power.
- It's also a great space saver. Places where you had multiple images or multiple items such as RSS feeds or category listings can now be presented in a slideshow.
The possibilities are really endless, as the more ways you can think of to categorize and add to views, the more you can rotate.
How to install and use this module
Option a: Use the available (Community) Documentation
To actually enable and use this module, make sure you follow the instructions detailed in the module's Community Documentation within "3.x - Views Slideshow Tutorial". Especially this part of it:
...
Enable the Views slideshow
and Views Slideshow: Cycle
modules.
You should now see the new views style option called "Slideshow".
So make sure that you also enabled the Views Slideshow: Cycle
sub-module.
Additional refinements:
Since in this case you want to do something special (tricky?), you need to do some extra things, within "settings of field thumbnail-design in my first view" (as in your last screenprint):
Where there is your "red arrow" (higlighter), it should say "link to" = "nothing" (you now have, in Dutch, "inhoud", which is "content"). FYI: That is what explains what is happening "now": you're asking a click on that image to be translated to something link "type an URL path = the path of the node where that image field is related to ...
Where there is your "red cross" (rewrite result), within the 'text' box ('Tekst' in Dutch), you need to further refine what you already have (with that div and token). More specifically, you need to REWORK that to something that corresponds to an hyperlink ('href', etc) (in which you can still use that div, with its class, and image token you already have). The PATH in that href needs to match the exact path that will bring you to what further on in your question you described as "I want every link to direct to the corresponding slide, because every thumbnails has it's own content.". What exactly that path is I cannot tell (I hope YOU know that path, if not we're done). However read on in the next bullet for 1 more hint to CREATE that path for the hyperlink to be added in this tekst box here ...
To create the correct path in the previous bullet, I "expect" that you might need something like the "nid", or something similar, of the actual node. It is possible that it is not available (yet) in the list of tokens within "replacement patterns". In my environment, at first I did not have the [nid]
token available at first, only things like [title]
, %1, !1, %2 and !2 . However, also making the [nid]
token available is possible like so: add an extra field (node Id) BEFORE (important) the field you already have, and mark it with "exclude from display". That's tricky, but that's how this works in Drupal ...
Option b: Restart from scratch
From the details provided in the question, it appears that it might be an option to consider starting from scratch (which is what I sometimes also do ...). Use HOW TO INSTALL & SETUP VIEWS SLIDESHOW MODULE ON DRUPAL7? as a possible step-by-step tutorial to do so.
As a variation, carefully review that tutorial to get ideas about what in your current approach seems to be wrong, and go back to option 'a'.
Option c: Try another module
If you rather want to change to using "Views Bootstrap" (cfr. one of the prior "versions" of this question, which contained "Views slideshow didn´t pop-up while creating a view, so I used Views Bootstrap."), then please create a NEW question about using Views Bootstrap (which I'd be happy to answer "also" if I can. Because that is a completely different question (and compliant to recent guidance / instructions from @Clive also).
Further enhancements
Possibly you may want to further extended this with related modules (there are dozens of modules to further enhance views) such as Views Slideshow: Galleria. Here is a quote from that module's project page:
Integrating Galleria with Views Slideshow.
Galleria is a JavaScript image gallery framework built on top of the jQuery library. The aim is to simplify the process of creating professional image galleries for the web and mobile devices.
jCarousel
Another option is to consider the jCarousel module. Here is a quote from its project page:
... This module allows developers and themers to make use of the jCarousel jQuery plugin. It includes a developer API that other modules can use, as well as Views integration in the 2.0 version so that you can turn any list of content or images into a carousel.
Features:
- Built-in Views support.
- AJAX-loading of additional items as needed.
- Carousel pager/navigation to jump between multiple pages.
- Circular wrapping of items.
- API for direct usage of jCarousel without Views.