You already know how to do that.
e.g. If the slideshow looks a bit small at say 480px width then throw in a media query and set it to display:none.
@media screen and (max-width: 480px) {
.slideshow-container,.dot{display:none}
}
e.g. If the slideshow looks odd at a viewport with a small height then throw in a height media query and set it to display:none.
@media screen and (max-height: 600px) {
.slideshow-container,.dot{display:none}
}
However, I think that slideshow looks ok on the smallest phone so I don’t think you need to do either of those unless you want a minimal design on mobile (which is fine if that is what you want).
I notice that in your new code you have introduced a very bad practice that was in none of the examples I have given you and in one fell swoop defeats the point of responsive and semantic design 
The item in question is this.
<br><br><br><br>
Never, ever ever ever ever ever do that!
A break element <br> is used for making a break between lines of text such as in a poem or address where it is not the end of a paragraph as such. It is never a means of making space.
I can go months without using a break as they simply are only needed in certain circumstances. If you have text content then you have text in a paragraph and the closing p tag creates the line break. Divs create their own line break as do other block elements. You only need a break when you want to create a new line inside an inline fragment such as poem or address or perhaps in a form control (although there are still better ways of doing forms than using breaks).
In your page you simply had to add a bottom margin to the elements in question (.main and .slideshow-container) and then you keep complete control in the stylesheet. On smaller screens you now have big gaps between blocks and no amount of media queries will help because you have filled the html with breaks that you can’t target from the css. Use margins (and or padding) on existing elements to make space. Html does not make space on its own; it is a structural language. (In olden days a browser would ignore 2 breaks in a row anyway).
I also notice that you seem to have broken the small screen display by ,making the font-size event bigger than it was before.
Remove that erroneous media query where you set it to 3em.
I have made those changes here:
Lastly don’t be tempted to add inline styles even for testing as once in the html they are usually stuck there. Also avoid inline click handlers as that is a job to be done from the js file.
You have done both here:
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
<span class="dot" onclick="currentSlide(6)"></span>
<span class="dot" onclick="currentSlide(7)"></span>
<span class="dot" onclick="currentSlide(8)"></span>
<span class="dot" onclick="currentSlide(9)"></span>
<span class="dot" onclick="currentSlide(10)"></span>
</div>
BTW that code should really be auto generated from the js based on the number of images present rather than being hard coded in the page. However that is a question for the JS forum.
