Added a slot-scoped gallery wrapper

[colq2]

Hey @silencesys, found your silentbox, great work!

I created this pull request for adding a slot-scoped wrapper around the gallery to have full power of customizing the gallery you want. At the moment you can change the view of single images, but not the wrapper around it.

With this pull request you could things like:

  <silent-box :gallery="images">
    <template v-slot:gallery-wrapper="{ galleryItems, openOverlay }">
      <div class="crazyWrapper">

        <custom-image 
            v-for="image in galleryImages"
            :key="image.src"
            class="someCrazyImageClass"
            @click="openOverlay"
        />

      </div>
    </template>
  </silent-box>

[silencesys]

Hello, thank you very much for you contribution! I've been thinking about this change for a while. However, I can not see any direct improvements to the current state, except the fact that this change could break the viewer because you might forgot to call openOverlay method in your code. The div that groups previews can be styled with class .silentbox-item and I'm considering adding more classes for better styling options. If you want more than just gallery, you can pass custom content via the default slot that is present in the silent-box component.

[colq2]

Hello, I understand the fact that you could forget call openOverlay. But I think there are two reasons this not a problem at all:

1. It is an advance feature, the one who is using ist will know from some sort of documentation to call the function
2. After testing in browser you will notice that you forgot something

I can describe the case I had and why it wasn't enough to just style the wrapper: I used silentbox together with swiperjs. To make it work I have to use a component as a direct parent of the images. Sort of

<silent-box :gallery="images">
    <template v-slot:gallery-wrapper="{ galleryItems, openOverlay }">
      <Swiper class="forgot-the-class">

        <responsive-image 
            v-for="image in galleryImages"
            :key="image.src"
            class="swiper-class"
            @click="openOverlay"
        />

      </Swiper>
    </template>
  </silent-box>